Firefox 6/7处理max-width:320px媒体查询错误吗？

Question

我最近在Firefox中看到了媒体查询的奇怪行为,我想知道谁做对了(与Chrome和IE9相比).

我有以下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%;}
}

而Firefox(在调整浏览器大小时,似乎没有注意到max:width 320px,而它对更大的屏幕媒体查询做出反应.

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

---

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

在此先感谢... J.

Answer 1

我不知道为什么提供的答案已被勾选,因为它没有回答OP的问题.媒体查询未触发320像素的原因是Firefox中的导航工具栏.

如果你将其关闭(转到VIEW - TOOLBARS - NAVIGATION TOOLBAR并取消勾选),则媒体查询将以320像素触发.

Answer 2

在Firefox中,根据您确切的工具栏设置,内容区域可能无法收缩到某个宽度以下.如果您设置一个带有垂直滚动条的页面,当窗口小于最小宽度时,您可以看到滚动条开始消失.此时,浏览器窗口变小,但页面视口不是.因此,如果您的最小宽度大于320px,那么上面的媒体查询将永远不会应用.

关键点是媒体查询匹配页面视口宽度,而不是浏览器窗口宽度.

此外,媒体查询匹配CSS像素,而不是设备像素.放大Firefox会更改设备像素中CSS像素的大小,因此页面视口大小(在设备像素中固定)会改变CSS像素.

缩放应该没有标准.