Firefox与基于宽度的媒体查询的webkit测量

Question

当使用max-width媒体查询时,Firefox和Webkit浏览器似乎会测量不同的东西.在调查响应式设计检修的断点时,我发现Chrome将包含预期宽度的样式表,但Firefox总是将纸张包含在比预期宽度窄的位置.例如:

<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="/480.css" />

我希望在将窗口大小从1280调整到480像素宽时文档的宽度会触发将样式表包含在文档宽度为480的情况下.但Firefox直到宽度为463px才会包含它.

我运行了一些测试,看到在Chrome中,宽度似乎是基于window.innerWidth,而Firefox使用的是document.documentElement.clientWidth.通过在window.matchMedia("(max-width:480px)")上使用事件监听器来确认此信息.(截屏).

我的问题是:我是唯一一个注意到这一点的人吗？我找不到任何其他对此行为的引用,所以也许我做错了什么？

Answer 1

也许有点太晚了,但我面临同样的问题.然而,这里有456 Berea的一些见解

"宽度"媒体功能描述了输出设备的目标显示区域的宽度.对于连续媒体,这是视口的宽度(如CSS2,第9.1.1节[CSS21]所述),包括渲染滚动条的大小(如果有的话).

宽度应包括垂直滚动条.Safari没有.可以说WebKit行为在某种意义上更适合Web开发人员,因为滚动条宽度在浏览器和平台之间并不完全相同.

无论哪种方式,只是提醒浏览器行为在这一点上是不一致的.在许多情况下,它并不重要,但如果您想要在布局更改发生时进行像素精度控制,则会很烦人.