$(window).width() がメディア クエリ結果と異なるのはなぜですか? それを修正するにはどうすればよいですか?

$(window).width() とメディア クエリ結果の間の不一致

Twitter Bootstrap と jQuery を使用してビューポートに基づいて要素を操作する場合width を指定すると、$(window).width() によって返される結果と CSS メディアで計算された幅の間に不一致が発生する可能性があります。クエリ。この違いにより、応答動作の正確な適用が妨げられます。

この問題は、$(window).width() の計算でスクロールバーの幅が除外される可能性があることに起因します。これを解決するために提案される解決策の 1 つは、スクロールバーを明示的に含む $(window).innerWidth() を使用することです。

ただし、メディア クエリに合わせた包括的なアプローチについては、次のような代替メソッドの使用を検討してください。 CSS メディア クエリと一致します。

推奨解決策:

1. window.matchMedia():

   • ブラウザーの IE9 サポートが問題でない場合は、window を使用します。 .matchMedia()、CSS メディア クエリに完全に対応します。ブラウザのサポートは注目に値します: https://caniuse.com/#feat=matchmedia

2. Modernizr:

   • 古いブラウザとの互換性のために、Modernizr の mq メソッドを採用します。これは、メディア クエリを解釈するすべてのブラウザをサポートします。 CSS.

これらのソリューションを組み込むことで、jQuery コードと CSS メディア クエリのビューポート幅の計算を確実にシームレスに調整できます。

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