@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

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">

在你的脑海里