@media查询无法在移动设备上运行。适用于Chrome

Question

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

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

在浏览器中查看时有背景图像。我想在移动设备上观看时删除该图片但是它不能正常工作..请帮忙

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

测试iPhone 3G，4,5，Android Galaxy Nexus

Answer 1

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

无论如何，请确保您拥有viewport标记，例如<meta name="viewport" content="width=device-width,initial-scale=1.0">。

Answer 2

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

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

在你的头脑中

Answer 3

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