jquery与css计算的宽度不同

自己博客添加一些样式，当视口的宽度小于767px时，我也使用jQuery来更改页面上某些元素的顺序，问题是 $(window).width()与css计算的宽度不同。

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

$(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()返回767时，css将视口宽度计算为751，有16px不同，16px为滚动条宽度，但并非所有浏览器的滚动条宽度都是16px，正确解决如下

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' ] };
}

viewport获取宽度与css媒体宽度一致

相关文章：