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媒體查詢錯誤？

回答

相關問題