Firefox 6/7处理max-width：320px媒体查询错误？ [英] Is Firefox 6/7 handling max-width:320px media query wrong?

问题描述

我在Firefox中看到了媒体查询的奇怪行为，我想知道是谁在做正确的事情（与Chrome和IE9相比）。

得到了如下的CSS：

$ $ $ $ $ $ $屏幕和（最大宽度：320px）{
#sfWrapper {max- width：280px; font-size：0.625em; line-height：1.2em}
#cpw_banner {display：none; visibility：hidden;}
#cpw_content {width：100％;}＃cpw_aside {和Firefox（当调整浏览器大小时，并不是这样） t似乎注意到最大宽度为320px，而它对较大的屏幕媒体查询作出反应。

不仅如此，但是当我在窗口上经常使用ctrl +在Chrome和Internet Explorer 9不会在ctrl + / ctrl上应用新媒体查询 -

---

任何人都知道关于CTRL + / CTRL +和媒体查询的标准行为是什么？

在此先感谢...
J。

解决方案

在Firefox中，根据具体的工具栏设置，内容区域可能无法缩小到某个宽度以下。如果使用垂直滚动条设置页面，则当窗口小于最小宽度时，可以看到滚动条开始消失。在这一点上，浏览器窗口变小，但页面视口不是。所以，如果你的情况下，最小宽度大于320px，那么上面的媒体查询将永远不会适用。

关键在于媒体查询匹配页面视口宽度，而不是浏览器窗口的宽度。

此外，媒体查询匹配CSS像素，而不是设备像素。放大Firefox会改变设备像素中CSS像素的大小，所以页面视口大小（在设备像素中是固定的）会以CSS像素为单位变化。

没有什么缩放应该做的标准。

I'm seeing strange behavior with media query in Firefox lately, and I was wondering who's doing it right (compared to Chrome and IE9).

I've got the following css:

@media screen and (max-width:320px){
#sfWrapper{max-width:280px;font-size:0.625em;line-height:1.2em}
#cpw_banner{display:none;visibility:hidden;}
#cpw_content{width:100%;}#cpw_aside{width:100%;}
}

And Firefox (when resizing the browser, doesn't seem to notice the max:width 320px while it reacts to the bigger screen media queries.

Not only that, but when I use ctrl + often enough on a window it will kick in, where as Chrome and Internet Explorer 9 don't apply new media queries on ctrl + / ctrl -

---

Anyone know what's the 'standard' behavior with regards to ctrl+/ctrl- and media queries?

Thanks in advance... J.

解决方案

In Firefox, depending on your exact toolbar setup, it may be impossible for the content area to shrink below a certain width. If you set up a page with a vertical scrollbar, you can see the scrollbar start disappearing when the window gets to be smaller than that minimal width. At that point, the browser window is getting smaller, but the page viewport is NOT. So if that minimal width is greater than 320px in your case, then the media query above would never apply.

The key point being that media queries match on the page viewport width, not the browser window width.

Furthermore, media queries match on CSS pixels, not device pixels. Zooming in Firefox changes the size of a CSS pixel in device pixels, so the page viewport size (which is fixed in device pixels) changes in CSS pixels.

There is no standard of what zoom should do.

这篇关于Firefox 6/7处理max-width：320px媒体查询错误？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！