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

当使用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的情况下.但是直到宽度为463px时Firefox才会包含它.

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

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

解决方法

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

The ‘width’ media feature describes the width of the targeted display
area of the output device. For continuous media,this is the width of
the viewport (as described by CSS2,section 9.1.1 [CSS21]) including
the size of a rendered scroll bar (if any).

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

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