CSS @media 查询不适用于移动设备。在 Chrome 中运行良好
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17344339/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
@media query not working in mobile. Works fine in Chrome
提问by patel.milanb
I am trying to get this working but somehow its not working in mobile. when i use chrome tool to overrides the screen size, it works fine. i am not sure what i am doing wrong. please help
我正在尝试使其正常工作，但不知何故它在移动设备中不起作用。当我使用 chrome 工具覆盖屏幕尺寸时，它工作正常。我不确定我做错了什么。请帮忙
@media screen and (min-device-width : 320px) and (max-device-width : 480px) {
.container .backgroundImage { display: none; }
}
There is a background image when viewed in browser. s i would like to remove that image when viewed in mobile BUT its not working somehow.. please help
在浏览器中查看时有背景图片。si 想在移动设备中查看时删除该图像，但它无法以某种方式工作.. 请帮忙
=============
==============
TESTING ON IPhone 3G, 4, 5, Android Galaxy Nexus
在 iPhone 3G、4、5、Android Galaxy Nexus 上测试
回答by Adam Simpson
@Andy is right, double check your device-widths, or you could always just use min-widthso you don't have to know every device width.
@Andy 是对的，仔细检查您的device-widths，或者您可以随时使用，min-width这样您就不必知道每个设备宽度。
Regardless make sure you have a viewporttag, like <meta name="viewport" content="width=device-width,initial-scale=1.0">.
不管怎样，确保你有一个viewport标签，比如<meta name="viewport" content="width=device-width,initial-scale=1.0">.
回答by romedius33
Fantastic - forgot the viewport too! Fot all: Just add
太棒了 - 也忘记了视口！全部：只需添加
<meta name="viewport" content="width=device-width,initial-scale=1.0">
in your head
在你的脑海里
回答by Pops Jones
I know this is an old post, but I recently had an issue like this. I ended up fixing it by removing the CSS media query from the main CSS stylesheet, and entering the specific needs for mobile on the html style section instead. Don't know why it worked, but it did.
我知道这是一个旧帖子，但我最近遇到了这样的问题。我最终通过从主 CSS 样式表中删除 CSS 媒体查询并在 html 样式部分输入移动设备的特定需求来修复它。不知道为什么它有效，但它确实有效。
