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

Question

我最近更新了我的 site 以使其适合移动设备。在我的笔记本电脑上，当我将浏览器 window 变小或变大时，@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 标签放在 head 部分的其他 Meta 标签下方或 title 标签上方。

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

此元标记告诉移动设备不要缩放。这允许在脚本中加载移动设备的响应模板。