JavaScript はどのようにしてブラウザのビューポートの寸法を正確に決定できるのでしょうか?

JavaScript を使用したブラウザ ビューポートのサイズの取得

最適なコンテンツ エクスペリエンスを提供するには、ユーザーのブラウザ ビューポートのサイズを検出することが重要です。ビューポート サイズを理解すると、Web サイトで高品質の画像を表示し、デバイスの制限に基づいてレイアウトを調整できるようになります。 JavaScript は、ビューポートの寸法を決定するためのさまざまな手法を提供します。

ブラウザ間の @media 値と @media 値

ブラウザ間の互換性を確保するには、CSS @ を利用できます。ビューポートの寸法を取得するためのメディア ルール:

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 ビューポートの寸法を取得します。
• 不正確な値が提供される可能性があります。スケーリングによりモバイルデバイスでは表示されません。
• ズーム調整により 1 ピクセルが発生する可能性がありますoffset.
• IE8 以前ではサポートされていません。

document.documentElement.clientWidth および .clientHeight

これらのプロパティはビューポートの幅を提供します高さとスクロールバーの幅を引いたもの:

• と一致しますスクロールバーが存在しない場合の @media 値。
• jQuery のウィンドウ幅の値と同等。
• クロスブラウザで使用可能。
• DOCTYPE 宣言が欠落している場合は不正確になる可能性があります。

追加リソース

• ライブ ビューポートの寸法出力: [Link]
• Verge.js (クロスブラウザ ビューポート テクニック): [Link]
• Actual.js (任意の単位での正確なビューポート寸法): [リンク]

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