☰

$(window).width() はメディアクエリと同じではありません 質問する

tag-icon • tag-icon jquery css twitter-bootstrap media-queries
$(window).width() はメディアクエリと同じではありません 質問する

私はプロジェクトでTwitter Bootstrapを使用しています。デフォルトのBootstrapスタイルに加えて、独自のスタイルもいくつか追加しました。

//My styles
@media (max-width: 767px)
{
    //CSS here
}

また、ビューポートの幅が 767 ピクセル未満の場合にページ上の特定の要素の順序を変更するために 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 によって計算された幅が同じではないように見えることです。$(window).width()767 を返す場合、CSS はビューポートの幅を 751 として計算するため、16 ピクセルの差があるようです。

この問題の原因と解決方法をご存知の方はいらっしゃいますか? スクロールバーの幅が考慮されていないため、使用するのが$(window).innerWidth() < 751正しい方法だという意見もあります。ただし、理想的には、スクロールバーの幅を計算し、メディア クエリと一致するソリューションを見つけたいです (たとえば、両方の条件が値 767 に対してチェックされている場合)。すべてのブラウザーのスクロールバーの幅が 16 ピクセルであるわけではないのは確かです。

ベストアンサー1

IE9をサポートする必要がない場合は、window.matchMedia()（MDNドキュメント）。

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

window.matchMediaCSS メディア クエリと完全に一致しており、ブラウザーのサポートも非常に優れています。http://caniuse.com/#feat=matchmedia

アップデート：

より多くのブラウザをサポートする必要がある場合は、Modernizr の MQ メソッドCSS のメディアクエリを理解するすべてのブラウザをサポートします。

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

おすすめ記事