Firefox 6/7处理最大宽度：320px媒体查询错误？

最近我在火狐浏览器中看到了一些奇怪的行为，我想知道谁在做正确的事情（与Chrome和IE9相比）。Firefox 6/7处理最大宽度：320px媒体查询错误？

我已经得到了下面的CSS：

而它反应到更大的屏幕媒体查询宽度320像素：

@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（调整浏览器的时候，似乎没有注意到最大。

不仅如此，但是当我用ctrl +往往一个窗口会踢，那里的Chrome和Internet Explorer 9不要CTRL应用新媒体查询+/CTRL上有足够的 -

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

在此先感谢... J.

来源

2011-10-05 jbokkers

扩展导航栏（例如，Firebug，Colorzilla，LastPass，Web of Web）的扩展极大地恶化了这个问题。我在与这个问题有关的三个Stack Overflow问题中看到的最简单的解决方案是下面的@ john-aspinall。另见http://stackoverflow.com/questions/10821329/why-does-firefox-have-a-min-width-minimum-of-615px和http://stackoverflow.com/questions/8286680/media-min-宽度非存在公认的逐火狐-8。 –

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

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

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

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

来源

2011-10-05 16:32:58

谢谢！如果每个人都对变化进行同样的缩放... – jbokkers

我一直在为320px的响应设计工作，但Firefox不会回应。

我发现，由于某种原因，如果您将媒体查询设置为480px - (max-width:480px) - 那么Firefox将应用媒体查询。

来源

2012-01-08 16:44:26 powellian

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

如果将其关闭（转到视图 - 工具栏 - 导航工具栏并取消选中），则媒体查询将以320像素点亮。

来源

2012-02-13 15:49:46 JohnAsp

Euhm ......那么这就是他所说的不对？根据工具栏的设置，视口不能缩小到320px以下，这就是为什么媒体查询不会触发。也许你不清楚，但对我来说，作为OP，我完全理解鲍里斯的意思，因此答案标志...... J. – jbokkers

我同意这个答案更清晰简洁，不过既然他们都有帮助我upvoted两个。顺便说一句，你可以非常快速地切换Windows中的导航工具栏：只要按住ALT并按下V，T，N即可。我假定Mac有类似的功能（可能是Command）。 –

Firefox 6/7处理最大宽度：320px媒体查询错误？

回答

相关问题