媒体查询适用于移动版Firefox但不适用于移动版Chrome

Posted 2021-05-02

我正面临移动设备上的媒体查询问题。我有这样的事情：

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

我在Galaxy S6上测试我的网站。在Firefox中，一切看起来都很好，样式确实发生了变化，但当我在Chrome中加载相同的网站时 - 没有任何变化，看起来媒体查询不起作用。 Chrome需要一些特殊查询吗？

答案

将此元标记添加到html文件的标题中：

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

这应该可以解决您的问题。否则，浏览器可能无法调整大小，因为它不会接受屏幕大小符合您的媒体查询条件。

另一答案

我也有这个问题，我认为它与@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（移动设备）之外，它实际上产生了一些问题：

• 所有在max-width下都有639px的媒体查询在Chrome（或默认的android浏览器）中被忽略了;
• 使用max-device-width语法的查询也被忽略（只有max-width工作）。

所以我的建议是，在你检查CSS中的所有问题之前，首先看一下可能影响视口的所有元标记。