为什么 $(window).width() 会大于 CSS 最大宽度？答案

【问题标题】：Why would $(window).width() be larger than CSS max-width?为什么 $(window).width() 会大于 CSS 最大宽度？
【发布时间】：2013-04-09 23:38:00
【问题描述】：

在我的 CSS 中，我有这样的代码：

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

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

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

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

【问题讨论】：

innerWidth and outerWidth oddness on desktop的可能重复

标签： javascript jquery css

【解决方案1】：

我相信可见页面和窗口大小之间存在差异。据我了解，在香草 JS 中：

window.innerWidth, window.innerHeight

（页面的可见宽度/高度）

window.outerWidth, window.outerHeight

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

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

【讨论】：

【解决方案2】：

没有足够的背景来告诉你浏览器到底发生了什么。

我写了以下页面来测试一切：

<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style>
    html { background:blue; }
    @media screen and (max-width: 980px) {
        html { background:red; }
    }
</style>
</head>
<body>test</body>
</html>

在使用检查器对其进行测试后，Chromium 检查器内部的$(window).width() 准确显示了它应该是什么。

当屏幕为红色时，检查器中设置了以下样式：

margin-left: 8px;
margin-right: 8px;
width: 964px;

...控制台中的 jquery 显示：

> $(window).width()
980

总宽度是宽度 + 所有边距。所以，就是：964 + 8 + 8 = 980。

在我看来，这种不一致是由 margins 引起的，并且可能是为您正在测量的标签和任何父标签设置的边框。我没有看到这种行为的任何其他原因。

我希望这会有所帮助。

【讨论】：

【解决方案3】：

我发现了问题。

在 chrome 中，我按了 CTRL MINUS 几次，因此窗口以某种方式缩放以显示更小的文本。完成此操作后，jquery 将报告与 css 报告不同的窗口宽度

【讨论】：