JavaScript でデバイスの画面幅を正確に決定するにはどうすればよいですか?

JavaScript でのデバイスの画面幅の決定

JavaScript でデバイスの画面幅を取得できる機能は、ユーザーのデバイスの特定のサイズにコンテンツを調整する場合に役立ちます。 CSS メディア クエリは画面サイズに依存したスタイル調整を行う便利な方法を提供しますが、JavaScript はデバイスの実際の幅にアクセスするための直接的な方法を提供します。

ビューポートの幅とは異なり、デバイスの幅は画面の物理的寸法を純粋に測定することができます。 。これは、ビューポートの制約と一致しない可能性がある特定のデバイスの向きをターゲットにする場合に特に便利です。たとえば、iOS デバイスでは、最大幅 640 ピクセルをターゲットとする CSS メディア クエリは、iPhone 4 でも横向きモードと縦向きモードの両方をキャプチャします。ただし、Android デバイスでは、デバイス幅を使用して、両方の向きを効果的に処理し、両方の向きを除外する必要があります。

ただし、デバイスの幅に基づいて JavaScript バインディングを呼び出そうとすると、ビューポートの幅に制限されるのが一般的です。この制限により、次のコードに示すように、追加の条件チェックが強制されます。

if ($(window).width() <= 960 && $(window).height <= 640) { /* ... */ }

この冗長なアプローチを回避するには、デバイスの物理画面幅に直接アクセスできる screen.width プロパティの利用を検討してください。さらに、ウィンドウ サイズが画面サイズと異なるデスクトップ ブラウザの場合は、window.innerWidth プロパティを使用できます。

モバイル ブラウザとデスクトップ ブラウザの両方が関係する状況では、多くの場合、ハイブリッド アプローチが推奨されます。

var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;

この組み合わせにより、さまざまなデバイスやオペレーティング システムにわたって正確なデバイス幅が検出されます。

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