jquery - $(window).width() 与媒体查询不同

Question

我正在一个元素中使用 Twitter Bootstrap。除了默认的 Bootstrap 样式外，我还添加了一些自己的样式

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

当视口(viewport)的宽度小于 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 将视口(viewport)宽度计算为 751，因此似乎有 16px 的差异。

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

Answer 1

如果您不必支持 IE9，您可以使用 window.matchMedia() ( MDN documentation )。

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

window.matchMedia 与 CSS 媒体查询完全一致，浏览器支持相当好:http://caniuse.com/#feat=matchmedia

更新:

如果你必须支持更多的浏览器，你可以使用Modernizr's mq method , 它支持所有理解 CSS 媒体查询的浏览器。

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