[解決済み】$(window).width()がメディアクエリとは違う

質問

あるプロジェクトでTwitter Bootstrapを使用しています。 デフォルトの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で計算される幅が同じにならないようです。 というとき $(window).width() は767を返し、CSSはビューポートの幅を751と計算するので、16pxの差があるようです。

何が原因で、どうすればこの問題を解決できるのか、どなたかご存知ですか？スクロールバーの幅が考慮されていないと指摘されました。 $(window).innerWidth() < 751 が良いと思います。 しかし、理想的には、スクロールバーの幅を計算し、メディアクエリ（例えば、両方の条件が値767に対してチェックされている）と一貫性のある解決策を見つけたいのです。 すべてのブラウザでスクロールバーの幅が16pxであるとは限らないからです。

解決方法は？

IE9 に対応する必要がない場合は、単に window.matchMedia() ( MDNドキュメント ).

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

window.matchMedia は、CSS メディアクエリと完全に整合しており、ブラウザのサポートもかなり良好です。 http://caniuse.com/#feat=matchmedia

UPDATE

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

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