JavaScript で実際のデバイスの幅を取得するにはどうすればよいですか?

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

はじめに

対照的に、デバイスの実際の幅をキャプチャするビューポートの幅に対する調整は、JavaScript 開発における一般的な要件です。 CSS メディア クエリは、max-device-width プロパティを通じてこの機能を提供します。ただし、この機能を JavaScript に橋渡しすることは依然として課題です。

デバイスの幅とビューポートの幅

ビューポートの幅は、ブラウザ ウィンドウ内のページの表示部分に関係します。一方、デバイスの幅は、デバイスの物理画面全体のサイズを表します。この区別は、レスポンシブ デザインを作成する場合、特に横向きのスマートフォンに対応する場合に重要になります。

JavaScript ソリューション

JavaScript でデバイスの幅を取得するには、画面を使用します。 width プロパティ:

var deviceWidth = screen.width;

場合によっては、特にデスクトップ ブラウザでは、window.innerWidth の方がより正確な値を提供することがあります。測定:

var windowWidth = window.innerWidth;

デスクトップ ブラウザーとモバイル デバイスの両方が関係するシナリオの場合、包括的なソリューションは両方の測定を組み合わせることです:

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

このアプローチにより、デバイスに関係なく正しいデバイス幅が確保されます。またはブラウザの種類。

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