$（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) {&nbsp; &nbsp;$("#body-container .main-content").remove()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .insertBefore($("#body-container .left-sidebar"));} else {&nbsp; &nbsp;$("#body-container .main-content").remove()&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .insertAfter($("#body-container .left-sidebar"));}你也可以得到viewport类似的function viewport() {&nbsp; &nbsp; var e = window, a = 'inner';&nbsp; &nbsp; if (!('innerWidth' in window )) {&nbsp; &nbsp; &nbsp; &nbsp; a = 'client';&nbsp; &nbsp; &nbsp; &nbsp; e = document.documentElement || document.body;&nbsp; &nbsp; }&nbsp; &nbsp; return { width : e[ a+'Width' ] , height : e[ a+'Height' ] };}以上代码来源