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

提问者：小点点

我在为媒体的质疑而苦苦挣扎。如果我调整浏览器窗口的大小，它们可以正常工作，但当我用Google Chrome设备仿真器仿真移动设备(iOS和Android)时，它们就不能工作了。

@media (max-width: 650px)

只添加一个屏幕或最小宽度不会改变任何事情。 viewport标记已设置。

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

共2个答案

匿名用户

您可以尝试以下代码:

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

另外，在HTML head组件中设置一个meta viewport标记

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

匿名用户

您应该在html头中设置meta viewport标记:

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

并且可以在介质查询规则中添加！missional，以检查是否有其他规则覆盖它们