javascript - 为什么 $(window).width() 会大于 CSS max-width？

Question

在我的 CSS 中我有这样的代码:

html {
background:blue;
}
@media screen and (max-width: 980px)
html {
background:red;
}

所以当浏览器窗口小于 980px 时，背景变为红色，其余时间为蓝色。

我将窗口大小调整为 970px(根据 CSS)并且背景为红色。但是当我使用 jquery 做一个 alert($(window).width()) 时，它给了我一个弹出窗口说 1000px

为什么 $(window).width() 会报告比 CSS 预期的值更大的值？

Answer 1

我相信可见页面和窗口大小之间存在差异。据我所知，在 Vanilla JS 中:

window.innerWidth, window.innerHeight 

(页面的可见宽度/高度)

window.outerWidth, window.outerHeight 

(浏览器外部宽度/高度)

令我震惊的是，这可能就是原因 - 返回的值是浏览器窗口的外部宽度。 Source