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

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 サイトの他の関連記事を参照してください。