Question

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

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

因此，当浏览器窗口小于980像素时，背景变为红色，其余时间为蓝色。

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

为什么$（window）.width（）报告的值大于CSS的预期值？

Answer 1

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

window.innerWidth, window.innerHeight

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

window.outerWidth, window.outerHeight

（浏览器外部宽度/高度）

这让我觉得这可能是原因 - 返回的值是浏览器窗口的外部宽度。 Source

Answer 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。

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

我希望这会有所帮助。

Answer 3

我发现了问题。

在chrome中，我按下了CTRL MINUS几次，因此窗口缩放的方式是文本较小。完成后，jquery将报告与css报告不同的窗口宽度

为什么$（window）.width（）大于CSS max-width？

3 个答案: