使用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）。
我的问题是：我是唯一一个注意到这一点的人吗？我找不到任何其他对此行为的引用，所以也许我做错了什么？
答案 0 :(得分：5)
可能有点太晚了，但我面临同样的问题。然而，这里有一些来自456 Berea
的见解“宽度”媒体功能描述了目标显示的宽度 输出设备的区域。对于连续介质，这是宽度 视口（如CSS2，第9.1.1节[CSS21]所述）包括 渲染滚动条的大小（如果有的话）。
宽度应包括垂直滚动条。 Safari没有。可以说WebKit行为在某种意义上更适合Web开发人员，因为滚动条宽度在浏览器和平台之间并不完全相同。
无论哪种方式，只是提醒浏览器行为在这一点上是不一致的。在许多情况下，它并不重要，但如果您想要在布局更改发生时进行像素精度控制，则会很烦人。
答案 1 :(得分：1)
根据documentation for clientWidth，它可能与DOCTYPE。
请注意，clientWidth属性对于html元素是特殊的。它 返回浏览器客户区的宽度而不是垂直 任何doctype的滚动条。如果未指定doctype，则为clientWidth html元素的属性包含不同的值 浏览器。
这是另一个link我发现有一些与浏览器宽度有关的浏览器相关案例很有用。