@media 查询适用于桌面浏览器,不适用于移动浏览器
@media query works in desktop browser, not in mobile browser
我最近更新了我的 site 以使其适合移动设备。在我的笔记本电脑上,当我将浏览器 window 变小或变大时,@media 查询会触发并更改 CSS。但是,在我实际的移动浏览器上,我得到的是桌面站点。有人可以告诉我发生了什么事吗?
包含在
<meta name="viewport" content="width=device-width, initial-scale=1">
它会起作用
您应该在您的网页中添加 <meta name="viewport" content="width=device-width, initial-scale=1">
。
以便虚拟视口与设备尺寸相匹配。
将元标记添加到您网站的头部部分。您需要将 Meta 标签放在 head 部分的其他 Meta 标签下方或 title 标签上方。
如果没有视口元标记,您的网站将呈现到设备的默认虚拟视口中。
此元标记告诉移动设备不要缩放。这允许在脚本中加载移动设备的响应模板。
我最近更新了我的 site 以使其适合移动设备。在我的笔记本电脑上,当我将浏览器 window 变小或变大时,@media 查询会触发并更改 CSS。但是,在我实际的移动浏览器上,我得到的是桌面站点。有人可以告诉我发生了什么事吗?
包含在
<meta name="viewport" content="width=device-width, initial-scale=1">
它会起作用
您应该在您的网页中添加 <meta name="viewport" content="width=device-width, initial-scale=1">
。
以便虚拟视口与设备尺寸相匹配。
将元标记添加到您网站的头部部分。您需要将 Meta 标签放在 head 部分的其他 Meta 标签下方或 title 标签上方。
如果没有视口元标记,您的网站将呈现到设备的默认虚拟视口中。
此元标记告诉移动设备不要缩放。这允许在脚本中加载移动设备的响应模板。