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

Question

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

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

@media (max-width: 650px)

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

有什么我需要知道的吗？多谢！

Answer 1

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

<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">