JavaScript を使用してデバイスの画面幅を正確に取得するにはどうすればよいですか?

JavaScript を使用して正確なデバイス幅の測定値を取得する

Web アプリケーションをさまざまなデバイス サイズに合わせて調整する場合、デバイスの実際の画面幅を取得することが重要です。 CSS は max-device-width プロパティを使用したメディア クエリを提供しますが、JavaScript にはこの情報を取得する直接同等の機能がありません。

ビューポート幅の制限

JavaScript バインディングは多くの場合依存します。ビューポートの幅をテストします。横向きのデバイスでは、より広い利用可能な領域が表示されるため、結果が不正確になる可能性があります。この制限により追加のチェックが必要になり、コードの優雅さが損なわれます。

解決策: 画面幅プロパティ

デバイスの画面幅を正確に決定するために、JavaScript は screen.width プロパティを提供します。この値は、スクロールバーや他のブラウザ要素を除いた、表示される画面スペースを表します。

クロスプラットフォームの考慮事項

場合によっては、特に window.innerWidth の方が適切な場合があります。ウィンドウ サイズがデバイスの画面サイズと異なるデスクトップ ブラウザの場合。すべてのプラットフォームに対応するには、次の条件を使用することをお勧めします:

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

このアプローチでは、window.innerWidth が定義されている場合は実際のデバイスの幅を width 変数に割り当てます。それ以外の場合は、screen.width をフォールバック。

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