$(window).width() と CSS メディア クエリが異なるビューポート幅をレポートするのはなぜですか?

$(window).width() と CSS メディア クエリの間で測定されたビューポート幅が一貫していません

jQuery の $(window).width を使用する場合() を使用してビューポートの幅を決定すると、CSS メディアによって計算された幅との不一致が発生する可能性があります。クエリ。この違いは、ブラウザのスクロールバーの幅など、さまざまな要因に起因する可能性があります。

この問題を解決するには、window.matchMedia() の使用を検討してください。この方法では、CSS メディア クエリと一致する正確な幅の計算が行われます。これはすべての最新ブラウザでサポートされており、次のように実装できます:

function checkPosition() {
    if (window.matchMedia('(max-width: 767px)').matches) {
        //...
    } else {
        //...
    }
}

Modernizr を使用した代替ソリューション:

ブラウザの互換性が懸念される場合は、次のように実行できます。 Modernizr によって提供される mq メソッド。メディア クエリを理解するすべてのブラウザをサポートしています。

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

スクロールバーを考慮しながら $(window).innerWidth() を使用してビューポートの幅を計算することは、常に最適な解決策であるとは限らないことに注意してください。スクロールバーの幅はブラウザによって異なる場合があります。

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