当使用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)")上使用事件监听器来确认此信息.(截屏).
我的问题是:我是唯一一个注意到这一点的人吗？我找不到任何其他对此行为的引用,所以也许我做错了什么？