0

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

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

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

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

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

4

3 回答 3

0

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

我写了以下页面来测试所有内容：

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

在与检查员进行测试后，$(window).width()Chromium 检查员的内部会准确显示它应该是什么。

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

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

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

> $(window).width()
980

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

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

我希望这有帮助。

于 2013-04-10T00:04:43.793 回答
0

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

window.innerWidth, window.innerHeight

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

window.outerWidth, window.outerHeight

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

我觉得这可能就是为什么 - 返回的值是浏览器窗口的外部宽度。资源

于 2013-04-09T23:43:48.910 回答
0

我解决了这个问题。

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

于 2013-04-10T00:32:49.307 回答