Firefox 6/7 处理 max-width:320px 媒体查询是否错误？答案

【问题标题】：Is Firefox 6/7 handling max-width:320px media query wrong?Firefox 6/7 处理 max-width:320px 媒体查询是否错误？
【发布时间】：2011-12-01 13:22:13
【问题描述】：

我最近在 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.

【问题讨论】：

增强导航栏的扩展（例如，Firebug、Colorzilla、LastPass、Web of Trust）大大恶化了这个问题。在与此问题相关的三个 Stack Overflow 问题中，我看到的最简单的解决方案是来自下面@john-aspinall 的解决方案。另见stackoverflow.com/questions/10821329/… 和stackoverflow.com/questions/8286680/…。

标签： firefox media-queries

【解决方案1】：

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

如果您将其关闭（转到查看 - 工具栏 - 导航工具栏并取消勾选它），则媒体查询将以 320 像素触发。

【讨论】：

呃……嗯，他就是这么说的不？根据工具栏设置，视口不能缩小到 320 像素以下，这就是媒体查询没有触发的原因。也许你不清楚，但对我来说，作为 OP，我完全理解鲍里斯的意思，因此答案旗...... J.
我同意这个答案更加清晰和简洁，尽管因为它们都很有帮助，所以我都赞成。顺便说一句，您可以非常快速地切换 Windows 中的导航工具栏：只需按住 ALT 并按 V、T、N。我认为类似的东西适用于 Mac（可能是命令）。

【解决方案2】：

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

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

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

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

【讨论】：

谢谢！如果每个人都以相同的方式处理缩放以进行更改，那就太好了...

【解决方案3】：

我一直致力于 320px 的响应式设计，但 Firefox 就是不响应。

我发现，出于某种原因，如果您将媒体查询设置为 480 像素 - (max-width:480px) - 无论如何，Firefox 都会应用媒体查询。

【讨论】：