正常状态下$（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。

该度量是正确的，因为它指的是“可用于”呈现内容的浏览器区域-返回浏览器的全宽度将是不正确的。

Answer 2

尝试检查位置，

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

另外，您也可以使用modernizr mq方法，

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