检查元素上的正常状态和响应状态的$（window）.width（）的差异

Question

我想知道为什么在浏览器标准和设备模拟模式下使用$(window).width()会有所不同。

当我在宽度为1024px的浏览器上使用$(window).width()时，我在标准模式下获得了1007的值，但是当在设备模拟模式下使用时，我得到的确是1024。

那么两者之间的区别是什么，无论如何都要检查正常窗口模式和设备仿真模式下的具体宽度？

我现在使用的是$(window).width()用于检查窗口大小，所以无论如何都要检查这个旁边的实际大小？

Answer 1

区别在于浏览器的滚动条。在所有浏览器的最新版本（http://www.textfixer.com/tutorials/browser-scrollbar-width.php）中，滚动条宽度为17px，如果将其添加到1007，则会得到1024px。

该指标是正确的，因为它指的是浏览器的“可用”区域和＃34;用于呈现内容 - 返回浏览器的全宽是不正确的。

Answer 2

尝试检查位置，

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

或者，您可以使用modernizr mq方法，

if (Modernizr.mq('(min-width: 1024px)')) {
    //...
} else {
    //...
}