$(window).width() がメディア クエリ幅の計算と異なるのはなぜですか? この不一致を解決するにはどうすればよいですか?

$(window).width() とメディア クエリ計算の不一致

Twitter Bootstrap をカスタム スタイルと併用する場合、要素の順序を変更しようとすると一般的な問題が発生しますCSS メディア クエリと jQuery の $(window).width() の両方を使用してビューポート サイズに基づきます。このシナリオでは、問題は、$(window).width() によって計算された幅と CSS メディア クエリによって決定された幅の間に観察された差異にあります。通常、CSS の幅の値はわずかに小さく、不一致が生じ、要素の位置が正しく配置されない可能性があります。

考えられる原因と解決策:

この不一致の潜在的な原因の 1 つ$(window).width() の計算でスクロールバーの幅を除外します。これを解決するには、代わりにスクロールバーの幅を含む $(window).innerWidth() を使用してみてください。ただし、スクロールバーの幅はブラウザによって異なるため、これは理想的な解決策ではない可能性があります。

より信頼できる解決策は、ビューポート幅の一貫した計算を提供し、完全に一致する window.matchMedia() 関数を利用することです。 CSSメディアクエリと互換性があります。次のコードはその使用例を示しています。

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

window.matchMedia() をサポートしていない古いブラウザの場合は、Modernizr ライブラリによって提供される mq メソッドの使用を検討してください。このメソッドは、CSS のメディア クエリを理解するブラウザに包括的なサポートを提供します。

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

これらの代替メソッドを採用することで、CSS メディア クエリと jQuery の幅計算の間の一貫性を確保し、CSS メディア クエリと jQuery の幅計算の間で発生する可能性のある不一致を解決できます。ビューポート サイズのバリエーション。

以上が$(window).width() がメディア クエリ幅の計算と異なるのはなぜですか? この不一致を解決するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。