window.innerWidth、$(window).widt

目的

因为使用到了媒体查询, 想看下媒体查询宽度包含滚动条还是不包含滚动条

结论

media 宽度包含滚动条, 与window.innerWidth一致, $(window).width()则是不包含滚动条视图

// 匹配媒体查询
window.matchMedia('(max-width: 380px)').matches

具体示例

假如我定义一个媒体查询media宽度限制为380px, 当宽度小于380的时候导航栏发生变化缩小为一个图标

//My styles
@media only screen and (max-width: 380px){
    ...
}

同时通过绑定$(window).resize(function);来不断输出window.innerWidth和$(window).width()

$(window).resize(function() {
    console.log("window.innerWidth: "+window.innerWidth);
    console.log("$(window).width(): "+$(window).width());
});

发现window.innerWidth包含滚动条, 与媒体查询宽度限制一致

$(window).width()不包含滚动条

在chrome中滚动条宽度为17px

题外:

可以通过媒体匹配来查找进行匹配

window.matchMedia('(max-width: 380px)').matches