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

【问题标题】：Firefox versus webkit measurements for media queries based on widthFirefox 与 webkit 基于宽度的媒体查询测量
【发布时间】：2012-02-17 03:43:13
【问题描述】：

似乎 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 直到 463 像素宽度才包含它。

我进行了一些测试，发现在 Chrome 中，宽度似乎基于 window.innerWidth，而 Firefox 使用的是 document.documentElement.clientWidth。此信息通过使用 window.matchMedia("(max-width: 480px)") 上的事件侦听器来确认。 (Screen shot)。

我的问题是：我是唯一注意到这一点的人吗？我找不到任何其他关于这种行为的参考，所以也许我做错了什么？

【问题讨论】：

标签： css media-queries responsive-design

【解决方案1】：

也许有点太晚了，但我面临着同样的问题。然而，这里有来自456 Berea的一些见解

“宽度”媒体功能描述了目标显示的宽度输出设备的区域。对于连续介质，这是视口（如 CSS2 第 9.1.1 节 [CSS21] 所述）包括渲染滚动条的大小（如果有）。

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

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

【讨论】：

【解决方案2】：

根据documentation for clientWidth，它可能与DOCTYPE有关。

请注意，clientWidth 属性对于 html 元素是特殊的。它返回浏览器客户区的宽度，不包括垂直线任何文档类型的滚动条。如果未指定 doctype，则 clientWidth html元素的属性包含不同的值浏览器。

这是另一个link，我发现它对一些与浏览器宽度相关的浏览器案例很有帮助。

【讨论】：