17
$(window).width()はメディアクエリと同じではありません
プロジェクトでTwitter Bootstrapを使用しています。デフォルトのブートストラップスタイルだけでなく、独自のスタイルもいくつか追加しました //My styles @media (max-width: 767px) { //CSS here } また、ビューポートの幅が767px未満の場合、jQueryを使用してページ上の特定の要素の順序を変更しています。 $(document).load($(window).bind("resize", checkPosition)); function checkPosition() { if($(window).width() < 767) { $("#body-container .main-content").remove().insertBefore($("#body-container .left-sidebar")); } else { $("#body-container .main-content").remove().insertAfter($("#body-container .left-sidebar")); } } 私が抱えている問題は$(window).width()、CSSによって計算された幅とCSSによって計算された幅が同じではないように見えることです。とき$(window).width()、751のようにビューポートの幅がそれほどに16pxの異なるがあるように思わ戻っ767 CSSの計算。 これを引き起こしている原因と、私が問題を解決する方法を誰かが知っていますか?人々は、スクロールバーの幅は考慮に入れられておらず、使用$(window).innerWidth() < 751する方法が進むべき道であると示唆しています。ただし、理想的には、スクロールバーの幅を計算し、メディアクエリと一致するソリューション(たとえば、両方の条件が値767をチェックしている場合)を見つけたいと思います。確かに、すべてのブラウザのスクロールバーの幅が16pxになるわけではないのですか?