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

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

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

因此，当浏览器窗口小于980px，背景变成红色，的其余时间，它是蓝色的。

我把窗口大小调整为970px（根据CSS），背景是红色的。但是，当我使用jQuery来做一个alert($(window).width())，这给了我一个弹出说1000px

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

来源

2013-04-09 John

[内部宽度和外部宽度奇怪在桌面上]的可能重复（http://stackoverflow.com/questions/22468878/innerwidth-and-outerwidth-oddness -on桌面） – 2017-01-10 08:33:02

我想出了这个问题。

在Chrome中，我按下了CTRL MINUS几次，因此窗口缩放的方式有较小的文本。一旦完成，jQuery将会报告与css报告不同的窗口宽度

来源

2013-04-10 00:32:49 John

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

window.innerWidth, window.innerHeight

（页面的可视宽/高）

window.outerWidth, window.outerHeight

（浏览器外宽/高）

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

来源

2013-04-09 23:43:48

没有足够的背景知道你的浏览器到底发生了什么。

我写了下面的页面来测试所有的东西：

<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()的铬督察里面显示它应该是什么。

虽然屏幕是红色的，下面的样式设置在检查：

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

...和jQuery在控制台显示：

> $(window).width() 
980

总宽度为宽度+所有的利润。因此，它是：964 + 8 + 8 = 980

在我看来，这种不一致是由利润率和可能的边界设置你测量标记和任何父标签引起的。我没有看到这种行为的任何其他原因。

我希望这会有所帮助。

来源

2013-04-10 00:04:43

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

回答

相关问题