デバイスの欺瞞に直面して JS/CSS から DPI/PPI を正確に検出するにはどうすればよいですか?

JS/CSS からのシステム DPI/PPI の検出

バックグラウンド

さまざまな DPI/PPI 設定を持つデバイス間で一貫したユーザー エクスペリエンスを維持することが重要です高解像度の画像を生成する最新のアプリケーション向け。ただし、従来の方法では信頼できる結果が得られない可能性があるため、デバイスの DPI/PPI を正確に検出することには課題があります。

デバイスの横たわる: 偽の 96ppi 読み取り

固定 " を持つ要素を使用した最初のアプローチCSS で 1 インチの幅を指定し、その offsetWidth を確認するのが合理的だと思われます。ただし、iPhone は PPI を誤って報告し、96ppi という誤った値を与えることが知られています。この誤った読み取りにより、このメソッドは信頼できなくなります。

代替アプローチ: デバイスのディスプレイの寸法

もう 1 つの考えられる解決策は、デバイスのディスプレイの寸法をインチ単位で取得し、それをピクセル単位の幅で割ることです。ただし、JS/CSS でこれらのディメンションにアクセスするのは簡単ではありません。

解決策: DevicePixelRatio

幸いなことに、デバイスの DPI/PPI を取得する信頼できる方法があります:

1. Window.devicePixelRatio を使用します: このプロパティは、デバイスの画面上のピクセルと CSS ピクセルの比率を提供します。
2. テスト要素の作成: で非表示の要素を作成します。 CSS の高さと幅は 1 インチです。
3. ディスプレイ解像度の取得: 要素のオフセット幅と高さに devicePixelRatio を乗算して DPI/PPI を計算します。

<code class="javascript">const testDiv = document.createElement('div');
testDiv.style.height = '1in';
testDiv.style.left = '-100%';
testDiv.style.position = 'absolute';
testDiv.style.top = '-100%';
testDiv.style.width = '1in';
document.body.appendChild(testDiv);

const DPI_X = testDiv.offsetWidth * window.devicePixelRatio;
const DPI_Y = testDiv.offsetHeight * window.devicePixelRatio;

console.log(DPI_X, DPI_Y);</code>

この方法は、従来の方法を使用して PPI を誤って報告する可能性のあるデバイスを含む、さまざまなデバイスで正確な DPI/PPI 測定値を提供します。

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