$（window）.width（）与媒体查询不同

Question

我在一个项目上使用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()返回767时，css将其视口宽度计算为751，因此似乎存在16px的差异。

有谁知道是什么原因造成的，以及如何解决这个问题？人们建议不要考虑滚动条的宽度，而应该使用滚动条的宽度$(window).innerWidth() < 751。但是理想情况下，我想找到一种解决方案，该解决方案可以计算滚动条的宽度，并且与我的媒体查询一致（例如，两种情况都针对值767进行检查）。因为肯定不是所有浏览器的滚动条宽度都为16px？

Answer 1

如果您不必支持IE9，则可以使用window.matchMedia()（MDN文档）。

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

window.matchMedia与CSS媒体查询完全一致，并且浏览器支持也非常出色

更新：

如果必须支持更多浏览器，则可以使用Modernizr的mq方法，它支持所有了解CSS中媒体查询的浏览器。

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