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

ブラウザのビューポート サイズの検出

問題:

JavaScript を使用してブラウザのビューポート サイズを確認するにはどうすればよいですか?この情報は、利用可能な表示領域に基づいて画質を最適化する場合に特に有益です。

解決策:

ブラウザのビューポートの寸法を取得するには、いくつかの方法があります:

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

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

window.innerWidth および window.innerHeight

プロパティ:

• スクロールバーを含む CSS ビューポートの寸法を取得します
• 初期スケールのため、モバイルデバイスでは信頼性が低い可能性がありますZoom

document.documentElement.clientWidth および .clientHeight

プロパティ:

• CSS ビューポートの幅からスクロールバーの幅を引いた値
• @media のディメンションと一致します。スクロールバー
• クロスブラウザサポート
• doctype がないと不正確

リソース:

• [さまざまなライブ出力]ディメンション](https://jsfiddle.net/ariya/tvn3d/)
• [Verge](https://github.com/ryanseddon/verge)
• [actual.js]( https://github.com/jsdom/actual)

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