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

Question

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

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

那么这两者之间有什么区别，是否可以检查正常 window 模式和设备仿真模式下的具体宽度？

我现在使用的是 $(window).width() 来检查 window 大小所以除了这个之外还有没有检查实际大小的？

Answer 1

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

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

Answer 2

尝试检查位置，例如，

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

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

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

Difference of $(window).width() on normal state and responsive state on inspect element