javascript - $(window).width() 在正常状态和检查元素上的响应状态的差异

Question

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

当我$(window).width()在宽度为 1024px 的浏览器上使用时，我在标准模式下得到了 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 {
    //...
}