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

Question

我在一个项目上使用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计算的宽度和CSS计算的宽度似乎不相同。当$(window).width()返回767时，css将视口宽度计算为751，因此似乎有16px不同。有谁知道造成这种情况的原因以及如何解决问题？人们已经建议不考虑滚动条的宽度，使用$(window).innerWidth() < 751是要走的路。但理想情况下，我想找到一个计算滚动条宽度的解决方案，这与我的媒体查询一致（例如，两个条件都在检查值767）。因为当然并非所有浏览器的滚动条宽度都是16px？

Answer 1

这可能是由于scrollbar，使用innerWidth而不是width像

if($(window).innerWidth() <= 751) {

   $("#body-container .main-content").remove()

                                .insertBefore($("#body-container .left-sidebar"));

} else {

   $("#body-container .main-content").remove()

                                .insertAfter($("#body-container .left-sidebar"));

}

你也可以得到viewport类似的

function viewport() {

    var e = window, a = 'inner';

    if (!('innerWidth' in window )) {

        a = 'client';

        e = document.documentElement || document.body;

    }

    return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };

}

以上代码来源