css - @media 查询在移动设备中不起作用。在 Chrome 中运行良好

Question

我试图让这个工作，但不知何故它不能在移动设备上工作。当我使用 chrome 工具覆盖屏幕尺寸时，它工作正常。我不确定我做错了什么。请帮忙

@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
            .container .backgroundImage { display: none; }
}

在此处输入图像描述

在浏览器中查看时有背景图像。si想在移动设备中查看时删除该图像但它无法以某种方式工作..请帮助

==============

在 iPhone 3G、4、5、Android Galaxy Nexus 上测试

score 160 · Accepted Answer

@Andy 是对的，请仔细检查您的device-widths, 或者您可以随时使用min-width，这样您就不必知道每个设备的宽度。

无论如何确保你有一个viewport标签，比如<meta name="viewport" content="width=device-width,initial-scale=1.0">.

score 31 · Accepted Answer

太棒了 - 也忘记了视口！全部：只需添加

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

在你的脑海中

score 4 · Accepted Answer

如果没有视口元标记，移动设备会以典型的桌面屏幕宽度呈现页面，然后缩小页面，使其难以阅读。设置视口元标记可让您控制视口的宽度和缩放比例，以便在所有设备上正确调整其大小。

因此，这对我有用：

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

score 3 · Accepted Answer

我知道这是一个旧帖子，但我最近遇到了这样的问题。我最终通过从主 CSS 样式表中删除 CSS 媒体查询并在 html 样式部分输入移动设备的特定需求来修复它。不知道为什么它有效，但它确实有效。