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

【问题标题】：@media query works in desktop browser, not in mobile browser@media 查询适用于桌面浏览器，不适用于移动浏览器
【发布时间】：2023-03-13 19:05:01
【问题描述】：

我最近更新了我的site，使其适合移动设备使用。在我的笔记本电脑上，当我物理地使浏览器窗口变小或变大时，@media 查询会触发并更改 CSS。但是，在我实际的移动浏览器上，我正在获取桌面站点。谁能告诉我这是怎么回事？

【问题讨论】：

【解决方案1】：

包含在

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

它会起作用的

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：