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

Posted

技术标签:

【中文标题】媒体查询适用于移动 Firefox,但不适用于移动 Chrome【英文标题】:Media query works on mobile Firefox but doesn't work on mobile Chrome 【发布时间】:2017-03-19 22:31:58 【问题描述】:

我遇到了移动设备上的媒体查询问题。 我有这样的东西:

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

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

【问题讨论】:

你为什么用min-/max-device-width而不是min-/max-width '@media screen and (min-width : 320px) and (max-width : 1000px)' 在 Chrome 上也不起作用 您是否在 html 元数据中声明了您的视口?这给我带来了问题。媒体查询根本没有发挥作用。 谢谢@Falk!这段代码成功了,现在一切正常;) 那么让我提供它作为答案。 :) 【参考方案1】:

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

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

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

【讨论】:

【参考方案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(移动)之外,它实际上产生了几个问题:

所有在639px 下具有max-width 的媒体查询都在Chrome(或默认的android 浏览器)中被忽略; 带有max-device-width 语法的查询也被忽略(只有max-width 有效)。

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

【讨论】:

以上是关于媒体查询适用于移动 Firefox,但不适用于移动 Chrome的主要内容,如果未能解决你的问题,请参考以下文章

媒体查询不适用于移动设备

Jquery mobile getJSON 适用于浏览器但不适用于移动设备

媒体查询适用于引导类,但不适用于我的 id 或类

响应式网页设计适用于桌面,但不适用于移动设备

React Web App Routing 适用于桌面(包括移动开发视图),但不适用于移动浏览器

CSS,如何区分ios和android?