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

Posted 2023-03-06

【中文标题】@media 查询在移动设备中不起作用。在 Chrome 中运行良好

【英文标题】：@media query not working in mobile. Works fine in Chrome

【发布时间】：2013-06-25 00:35:37

【问题描述】：

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

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

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

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

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

【问题讨论】：

根据您的 iPhone 版本，它的最大设备宽度可能大于 480。尝试900 或其他一些愚蠢的方法以确保它们正常工作。两个规则集之间也应该有一个and

不工作..我正在测试的设备是否有可能有ratina显示，这就是它不工作的原因..

在 em 中使用宽度而不是像素，试试吧。

【参考方案1】：

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

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

【讨论】：

我在头部包含了元标记。仍然不适合我。

正如@AnishNair 所说，这并不能 100% 解决问题

这个答案并不能完全解决问题

viewport 对我有帮助。谢谢亚当

2019 年，您仍然可以通过此回复保存 ppl，谢谢 Adam

【参考方案2】：

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

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

在你的脑海里

【参考方案3】：

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

【讨论】：

在执行此操作之前您是否尝试过清除缓存？ css 文件可能被缓存了

【参考方案4】：

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

因此这对我有用：

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