媒体查询适用于移动设备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中的所有问题之前，先查看可能影响视口的所有元标记。