CSS 媒体查询在移动设备上不起作用

Posted 2023-03-06

【中文标题】CSS 媒体查询在移动设备上不起作用

【英文标题】：CSS Media Queries don't work on mobile devices

【发布时间】：2020-10-03 21:20:01

【问题描述】：

媒体查询工作正常。我的样式表的链接有问题。非常感谢你的回答！不会删除此问题以将知识保留给社区

我正在为我的媒体查询而苦苦挣扎。如果我调整浏览器窗口的大小，它们可以正常工作，但是当我使用 Google Chrome 设备模拟器模拟移动设备（ios 和 android）时，它们将无法正常工作。

@media (max-width: 650px)

仅添加屏幕或最小宽度不会改变任何内容。视口标签已设置。

有什么我需要知道的吗？ 非常感谢！

【问题讨论】：

@jeprubio 非常感谢，但标签已设置。将其添加到我的问题中。 :)

您可以将其中一些规则添加到问题中或创建代码笔来重现问题

【参考方案1】：

您应该在 html 标头中设置元视口标签：

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

您可以在媒体查询规则中添加 !important 以检查其他规则是否覆盖它们

【讨论】：

非常感谢，但标签已设置。将其添加到我的问题中。 :)

【参考方案2】：

你可以试试这个代码：

@media only screen and (max-width: 600px) 
    body 
      background-color: lightblue;
    

另外，在你的 HTML 头部组件中设置一个元视口标签

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

【讨论】：

非常感谢，但标签已设置。将其添加到我的问题中。 :)