JavaScript を使用してブラウザのビューポートの寸法を取得するにはどうすればよいですか?

ブラウザのビューポートの寸法を取得する方法

背景:

ブラウザの表示コンテンツ「ビューポート」として知られる指定された領域内。この領域には、アドレス バー、ツールバー、およびその他の UI 要素は含まれません。特定のシナリオでは、開発者はユーザーに最適な表示エクスペリエンスを提供するために、ビューポートの正確なサイズを決定する必要がある場合があります。

解決策:

JavaScript を使用したブラウザ ビューポートの寸法:

1.クロスブラウザ @media (幅) および @media (高さ) 値:

let vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
let vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0)

2. window.innerWidth および window.innerHeight:

これらのプロパティは、スクロールバーを含む CSS ビューポートの幅と高さを直接返します。ただし、スケーリングの問題により、これらの値はモバイル デバイスでは異なる場合があることに注意してください。

3. document.documentElement.clientWidth および .clientHeight:

これらのプロパティは、スクロールバーの幅を除いたビューポートの幅と高さを計算します。スクロールバーが存在しない場合、これらは @media 値と一致します。

追加情報:

• 上記のメソッドはブラウザ間で互換性があり、広くサポートされています。
• さまざまなビューポートのライブ出力をテストするためのリソースがオンラインで利用可能です
• 「verge」や「actual」などのサードパーティ ライブラリは、任意の測定単位で正確なビューポートの寸法を取得するための便利な抽象化を提供します。

以上がJavaScript を使用してブラウザのビューポートの寸法を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。