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

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

はじめに:
デバイスの幅へのアクセスは、特に特定の画面をターゲットとする場合、レスポンシブ Web デザインにとって重要です。サイズ。 CSS メディア クエリには、このニーズに応える max-device-width プロパティが用意されていますが、JavaScript には、デバイスの固有の幅を取得するための同様の直接メソッドがありません。

デバイス幅とビューポート幅:
課題は、デバイスの幅とビューポートの幅の区別にあります。前者は物理的な画面サイズを指し、後者はブラウザ ウィンドウ内の表示部分を表し、サイズ変更やズームにより異なる場合があります。

ビューポート幅の制限:
JavaScript でビューポートの幅に依存すると、非効率が生じる可能性があります。クエリに示されている例を考えてみましょう。ここでは、iOS スマートフォンで横向きと縦向きを区別するために追加の条件が必要です。ここで、デバイスの幅に直接アクセスできる機能が重要になります。

解決策: screen.width プロパティ
解決策は、screen.width プロパティにあり、これにより、デバイスの物理的な画面幅。このプロパティは、さまざまなブラウザやデバイス間で広くサポートされています。

互換性に関する考慮事項:
ただし、一部のデスクトップ ブラウザでは、screen.width プロパティが常にデバイスの実際の画面サイズ。これに対処するために、次のスニペットに示すように、ハイブリッド アプローチが empfohlen です。

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

このスニペットは、利用可能な場合は window.innerWidth を使用します。これは通常、モバイル デバイスの場合であり、画面にフォールバックします。サポートされていない場合は幅。これにより、幅広いデバイスやブラウザ間での互換性が保証されます。

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