媒體查詢適用於移動設備Firefox，但不適用於移動設備Chrome

Question

我正面臨移動設備上媒體查詢的問題。 我有這樣的事情：

@media screen and (min-device-width : 320px) and (max-device-width : 480px){ 
/* Some styles*/ 
} 

我測試我的網站上銀河S6。在Firefox中，一切看起來都很好，樣式也會改變，但是當我在Chrome中加載同一個網站時 - 沒有任何變化，它看起來像媒體查詢不起作用。 Chrome需要一些特殊的查詢嗎？

Answer 1

添加這個元標記到您的HTML文件的標題：

<meta name="viewport" content="width=device-width, initial-scale=1.0"> 

這應該解決您的問題。否則，瀏覽器可能無法調整大小，因爲它不會接受屏幕大小符合媒體查詢條件。

Answer 2

我也有這個問題，我認爲它與@media queries nesting（只有Firefox目前實現）有關。由於它是我處理的一個外國巨大的CSS文件，我浪費了很多時間將每條規則分成更嚴格的查詢（範圍包括最小值，最大值，像素比和分辨率）...

後來我發現這一行後：

<meta name="viewport" content="width=device-width,initial-scale=1"> 

在另一個模板不存在與另一行：

<meta name="viewport" content="width=639, initial-scale=0.5, maximum-scale=1.0, user-scalable=no"> 

這是壓倒一切的第一條規則，與Firefox（移動）之外，它實際上創造了一個幾個問題：

• 在Chrome（或默認Android瀏覽器）中忽略max-width下以下的所有媒體查詢都被忽略;
• 與max-device-width語法查詢也被忽略（只有max-width工作）。

所以我的建議是，在您檢查CSS中的所有問題之前，先查看可能影響視口的所有元標記。