javascript - window.screen.width と window.screen.height が iPad 3 で機能しない

Question

関数を使っています

window.screen.width
window.screen.height

ユーザーの画面解像度を検出します。PC では魅力的に機能しますが、iPad 3 では機能しません。2048 と 1536 の代わりに 768 と 1024 を出力します。

誰か助けてくれませんか？前もって感謝します

Answer 1

うん。モバイル デバイスの興味深い世界へようこそ!

iPad 3 (およびその他の Retina デバイス) は、window.devicePixelRatioset toを使用2して、css ピクセルと論理ピクセルが異なることを示します。iPad 3 はまだ 1024 × 768 を報告します。これは CSS ピクセルの数です。

別の混乱の原因として、一部の Android デバイスはビューポートの幅を報告し、一部は物理的な幅を報告します。つまり、一部の Android デバイスに尋ねるwindow.screen.heightと、ドキュメントが長い場合は何千もの幅になります。

要するに、あなたの問題ではwindow.devicePixelRatio、乗数として使用してください。私は次のようなものを使用します

if(!window.devicePixelRatio) {
    window.devicePixelRatio = 1;
}

設定されていない場合は、開始する前に 1 として宣言されていることを確認します。

Answer 2

if(window.devicePixelRatio !== undefined) {
    dpr = window.devicePixelRatio;
} else {
    dpr = 1;
}

var screen_width = window.screen.width * dpr;
var screen_height = window.screen.height * dpr;

このソリューションは完全に機能します。