ホームページ >ウェブフロントエンド >CSSチュートリアル >エッジケースを処理しながら、JavaScript でブラウザの幅を正確に取得するにはどうすればよいですか?
JavaScript を使用してブラウザの幅を取得する (エッジ ケースを含む)
JavaScript を使用して現在のブラウザの幅を取得するのは簡単ですが、エッジを考慮することが重要です正確な測定を保証するためのケース。解決策を探ってみましょう:
body 要素の幅が 100% に設定されている場合、document.body.offsetWidth を使用してブラウザの幅を取得するために言及したコードは失敗する可能性があります。これは、body 要素が利用可能な水平方向のスペースを埋めるために拡張されるため、不正確な測定結果が得られるためです。
これに対処するには、次の点を考慮してください。関数:
function getBrowserWidth() { return Math.max( document.documentElement.clientWidth, window.innerWidth || 0 ); }
説明:
仕組み:
関数は最初に使用を試みますdocument.documentElement.clientWidth を優先メソッドとして選択します。この値が使用できない場合、または 0 を返す場合は、水平スクロールバーを考慮して window.innerWidth に戻ります。
利点:
以上がエッジケースを処理しながら、JavaScript でブラウザの幅を正確に取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。