JavaScript を使用してデバイスの DPI/PPI を正確に検出するにはどうすればよいですか?

JS/CSS でのデバイス DPI/PPI 検出

デバイスのディスプレイ解像度を決定することは、適切なサイズで画像を生成するために重要です。ただし、JavaScript または CSS からシステム DPI または PPI を直接検出することには課題が伴います。

推奨されるアプローチの 1 つは、CSS で幅を「1in」に設定した要素を作成し、その offsetWidth を測定することです。ただし、この方法は、DPI 96 を誤って報告する iPhone のようなデバイスでは信頼性が低いことがわかります。

別の戦略として、ディスプレイの寸法をインチ単位で取得し、それをピクセル単位の幅で割る方法があります。このアプローチを実装するには、次の手順が必要です。

1. 1x1 インチの寸法で非表示の要素を作成します。
2. レイアウトとの干渉を防ぐために、要素を画面外に配置します。
3. window.devicePixelRatio を使用するか、デフォルトでデバイス ピクセル比 (DPR) を計算します。 1.
4. 要素の offsetWidth と offsetHeight に DPR を乗算して、水平および垂直 DPI を決定します。

以下は、このアプローチを示す JavaScript コード スニペットです。

<div>

このアプローチはデバイスの DPI/PPI を正確にキャプチャし、デバイス固有の DPI/PPI を正確に生成できるようにします。画像。

以上がJavaScript を使用してデバイスの DPI/PPI を正確に検出するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。