異なるモバイル画面に同じサイズで表示されるようにブロック要素をスケールするにはどうすればよいですか？

Question

私は5-6インチのスクリーン（iOSとAndroid）を搭載した携帯電話とこれらの5インチディスプレイで動作するよう設計されたGoogle Cardboardビューアでうまく動作するGoogle Cardboardアプリ（または改善の余地がある少なくともGoogle Cardboard対応アプリ） 6インチスクリーン。しかし、より大きな「フェイブル」画面でアプリを表示すると、視力は倍増し、アプリはそれらのデバイスにとって役に立たなくなります。

アプリは主に携帯電話の在庫ブラウザSafariとChromeで実行されるため、アプリのキャンバス/ブロック要素を縮小して、大型の携帯端末で5〜6インチの範囲内に収まるようにする方法はありますか？私が達成しようとしているもののイラスト：

これまでのところ、私の検索では、これは完全に可能ではないかもしれないことを説明する、this oneのような答えに私をもたらしているが、この場合の答えなら、I'LL？私は大画面でうまくスケールダウンする他のGoogle Cardboard VRアプリを見ましたが、おそらくJavaScript、HTML、CSSは含まれていません。

私はPhoneGapとAdobe PhoneGap Buildを使用してこのアプリケーションを作成していますので、PhoneGap/Cordovaプラグインにもアクセスできます。

ブラウザやGoogle Cardboard API（現時点ではCardboard SDKを使用していない、または2つのPhoneGapが途中にあるため）で利用可能な電話情報を介して、デバイス情報の参照を可能にするAPIがあります。

このトピックをもう一度見直しますが、この質問への回答方法について考えてください。

Answer 1

トリックは画面DPIを確実に取得することです。

Androidでは、画面のDPIを返すgetRealMetrics を使用できます。これは時々ビットがオフになることに注意してください。

ウェブでは、一般的な携帯電話のDPI値を表示するwebvr-polyfillのDPI databaseをチェックするとよいでしょう。