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

【问题标题】：CSS Media Queries don't work on mobile devicesCSS 媒体查询在移动设备上不起作用
【发布时间】：2020-10-03 21:20:01
【问题描述】：

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

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

@media (max-width: 650px)

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

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

【问题讨论】：

【解决方案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">

【讨论】：