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

Question

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

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

@media (max-width: 650px)

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

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

Answer 1

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

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

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

Answer 2

你可以试试这段代码：

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

此外，在 HTML 头部组件中设置元视口标签

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