@media查询适用于桌面浏览器，而不适用于移动浏览器

Question

我最近更新了我的site以使其适合移动设备。在我的笔记本电脑上，当我在物理上使浏览器窗口变小或变大时，@ media查询会触发并更改CSS。但是，在我的实际移动浏览器上，我获得了桌面版网站。有人可以告诉我发生了什么事吗？

Answer 1

包含在

中

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

它会起作用

Answer 2

您应该在网页中添加<meta name="viewport" content="width=device-width, initial-scale=1">。
以便虚拟视口与设备尺寸匹配。

将Meta标签添加到您网站的头部。您需要将Meta标记放在头部或标题标记上方的其他Meta标记下方。

如果没有视口元标记，您的网站将呈现在设备的默认虚拟视口中。

此Meta标签告诉移动设备不要缩放。这样就可以在脚本中加载移动设备的响应式模板。