基于宽度的媒体查询的Firefox和webkit测量 [英] Firefox versus webkit measurements for media queries based on width

问题描述

Firefox和Webkit浏览器似乎在使用最大宽度媒体查询时会测量不同的内容。在调查响应式设计检修的断点时，我发现Chrome将包含预期宽度的样式表，但Firefox总是包括比预期宽度窄的表单。例如：

It seems that Firefox and Webkit browsers measure different things when using a max-width media query. While investigating breakpoints for a responsive design overhaul, I found that Chrome will include stylesheets at the expected width, but Firefox always included the sheet at a narrower than expected width. For example:

<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。

I would expect the width of the document when resizing the window from 1280 to 480 pixels wide would trigger the inclusion of the stylesheet at a document width of 480. But Firefox does not include it until a width of 463px.

我运行一些测试，看到在Chrome中，宽度似乎是基于window.innerWidth，而Firefox使用document.documentElement.clientWidth。此信息通过在window.matchMedia（（max-width：480px））上使用事件侦听器来确认。 （屏幕截图）。

I ran some tests and see that in Chrome, the width seems to be based off of window.innerWidth, while Firefox is using document.documentElement.clientWidth. This information is confirmed by the use of the an event listener on window.matchMedia("(max-width: 480px)"). (Screen shot).

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

My question is: am I the only one noticing this? I can't find any other reference to this behavior, so maybe I'm doing something wrong?

推荐答案

有点太晚了也许，但我面临同样的问题。以下是 456 Berea 的一些见解

A bit too late maybe, but I'm facing the same issue. Yet, here's some insight from 456 Berea

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

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开发人员，因为滚动条宽度在浏览器和平台之间不完全相同。

The width should include the vertical scrollbar. Safari does not. Arguably the WebKit behaviour is better for web developers in a sense, since scrollbar width is not exactly the same across browsers and platforms.

无论如何，只是一个标题，浏览器的行为在这一点上是不一致的。在许多情况下，这并不重要，但是如果你想要像素精度控制布局变化发生时，它可能是恼人的。

Either way, just a heads up that browser behaviour is inconsistent on this point. In many cases it doesn’t matter a whole lot, but it can be annoying if you want pixel-precision control of when layout changes occur.

这篇关于基于宽度的媒体查询的Firefox和webkit测量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！