JavaScript でブラウザのビューポートの寸法を正確に決定するにはどうすればよいですか?

ブラウザのビューポートのサイズを決定する

ユーザー エクスペリエンスを最適化するには、さまざまなデバイスの画面解像度とビューポート サイズに対応することが重要です。これにより、鮮明さを犠牲にしたりプロポーションを歪めたりすることなく、高品質の画像を提供できます。この目標を達成するために、ブラウザのビューポートの寸法を正確に取得するための 2 つの JavaScript アプローチを検討してみましょう。

1.クロスブラウザ @media 値

このメソッドは、@media CSS メディア クエリを利用してブラウザのビューポートの寸法を取得します。さまざまなビューポートの測定値の最大値をクエリすることで、ブラウザーやデバイス間の違いを考慮することができます。

const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight | | 0);

2.ウィンドウとドキュメントのプロパティ

または、特定のウィンドウとドキュメントのプロパティを利用してビューポートの測定値を取得することもできます。

window.innerWidth および window.innerHeight

これらのプロパティは、スクロールバーを含むビューポートの寸法を取得します。ただし、ズーム設定の影響を受ける可能性があり、Internet Explorer 8 以前ではサポートされていません。

document.documentElement.clientWidth および .clientHeight

これらのプロパティブラウザのビューポートからスクロールバーの幅を引いたものを表します。これらは、スクロールバーが存在しない場合に @media 値と一致し、ブラウザー間の互換性があります。

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