Webフォーム/テキストオーバーレイでThree.jsフルスクリーンアプリを作成するにはどうすればいいですか？

Question

（私はそれを作る方法を求めていない、私のアプリ応答を作る方法を求めています明確にするためには）

だから私は使用してシーンをレンダリングするThree.jsを使用してWebアプリケーションに取り組んできましたフルウィンドウ。設定ボタンをクリックすると表示され、消える設定オーバーレイを作成したいと思います。アイデアは、このオーバーレイにいくつかのテキストといくつかのHTMLフォーム要素が含まれるということです。

私はオーバーレイを作成する方法を知っていますが、私の苦労はモバイル上で適切に表示する方法です。ウェブサイトは、モバイル上で責任を持って振る舞う際、一般的に、それについて移動する通常の方法は、このようなものを通じて、モバイルにも小さくなるようにビューポートを設定することであるようだ。

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

このページをレンダリングすることを私の理解であります実際にはモバイルデバイスが900ピクセル幅の画面のようなものを持っていても、それは320ピクセル幅のようなものにすぎないと考えています。このソリューションを使用して

問題は、私は私のフルスクリーンThree.jsシーンをレンダリングするとき、それは320個のピクセルのワイド使用し、私はファジー画像で終わるということです。

私は、自分のThree.jsシーンのレンダリングの完全な定義品質を維持しながら、私のオーバーレイ/設定フォームのためのビューポートをモバイルデバイス上でもっと小さくする方法を持っていたいと思います。

Answer 1

コメントごとに、高dpi画面でのピクセル比率の問題があるようです。以下のような
使用の何か：

renderer.setPixelRatio(window.devicePixelRatio); 
renderer.setSize(window.innerWidth, window.innerHeight);