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

时间:2016-11-06 14:49:42

标签: css google-chrome responsive-design media-queries

我在移动设备上遇到媒体查询问题。 我有这样的事情:

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

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

2 个答案:

答案 0 :(得分:0)

将此元标记添加到HTML文件的标题中:

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

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

答案 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(移动设备)之外,它实际上产生了一些问题:

  • 在Chrome(或默认的Android浏览器)中忽略max-width639px max-device-width下的所有媒体查询;
  • max-width语法的查询也被忽略(只有TBannerAd个有效。)

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