ホームページ >ウェブフロントエンド >CSSチュートリアル >エッジケースを処理しながら、JavaScript でブラウザの幅を正確に取得するにはどうすればよいですか?

エッジケースを処理しながら、JavaScript でブラウザの幅を正確に取得するにはどうすればよいですか?

Linda Hamilton
Linda Hamiltonオリジナル
2024-12-03 08:08:09650ブラウズ

How Can I Accurately Get Browser Width in JavaScript, Handling Edge Cases?

JavaScript を使用してブラウザの幅を取得する (エッジ ケースを含む)

JavaScript を使用して現在のブラウザの幅を取得するのは簡単ですが、エッジを考慮することが重要です正確な測定を保証するためのケース。解決策を探ってみましょう:

body 要素の幅が 100% に設定されている場合、document.body.offsetWidth を使用してブラウザの幅を取得するために言及したコードは失敗する可能性があります。これは、body 要素が利用可能な水平方向のスペースを埋めるために拡張されるため、不正確な測定結果が得られるためです。

これに対処するには、次の点を考慮してください。関数:

function getBrowserWidth() {
  return Math.max(
    document.documentElement.clientWidth,
    window.innerWidth || 0
  );
}

説明:

  • document.documentElement.clientWidth: このプロパティは、ウィンドウの内側の幅を返します。垂直スクロールバーの幅 (存在する場合) を含むピクセル。ただし、水平スクロールバーは含まれません。
  • window.innerWidth: このプロパティは、水平スクロールバーを含むウィンドウの内側の幅をピクセル単位で返します。

仕組み:

関数は最初に使用を試みますdocument.documentElement.clientWidth を優先メソッドとして選択します。この値が使用できない場合、または 0 を返す場合は、水平スクロールバーを考慮して window.innerWidth に戻ります。

利点:

  • エッジに対処します。幅 100% のボディの場合。
  • 水平方向であってもブラウザの幅を正確に測定します。スクロールバー。

以上がエッジケースを処理しながら、JavaScript でブラウザの幅を正確に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。