$(window).width() がメディア クエリ ブレークポイントと異なるのはなぜですか?

$(window).width() とメディア クエリ間のウィンドウ幅の不一致

Twitter Bootstrap とカスタム CSS を利用するプロジェクトでは、ビューポート幅の値の間に不一致が発生します$(window).width() とメディア クエリによって決定されます。メディア クエリ ブレークポイントを 767 ピクセルに設定しているにもかかわらず、$(window).width() は一貫して 16 ピクセル未満の値を返すため、予期しない CSS 計算が行われます。

原因と解決策

主な理由この矛盾は、$(window).width() の計算でスクロールバーの幅が除外されていることです。これを考慮するには、スクロールバーの幅を組み込む $(window).innerWidth() を使用することをお勧めします。ただし、メディア クエリ ブレークポイントとの一貫した動作が必要な場合、このアプローチは適切ではない可能性があります。

1. window.matchMedia() (最新のブラウザのみ)

IE9 を除く最新のブラウザをサポートできる場合、window.matchMedia() はシームレスなソリューションを提供します。 CSS メディア クエリと完全に連携し、JavaScript と CSS の間の一貫性を確保します。

2. Modernizr の mq メソッド

より広範なブラウザーをサポートするには、Modernizr の mq メソッドが実行可能なオプションです。 CSS メディア クエリを理解するブラウザの window.matchMedia() の動作をエミュレートします。

実装

Modernizr の mq メソッドを実装するには:

if (Modernizr.mq('(max-width: 767px)')) {
    //...
} else {
    //...
}

以上が$(window).width() がメディア クエリ ブレークポイントと異なるのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。