移动端CSS媒体查询无效？确保viewport标签在HTML中配置无误吗？
- 内容介绍
- 文章标签
- 相关推荐
本文共计784个文字，预计阅读时间需要4分钟。
标签缺失或配置错误，媒体查询基本不会启动。
媒体查询依赖浏览器对视口（viewport）的正确解析。如果 <meta name="viewport"> 标签没写、写错位置、或属性值有误，移动端浏览器会以桌面模式渲染页面——此时所有 @media 规则都处于“待机状态”，压根不参与样式计算。
- 必须放在
<head>内，且在任何 CSS 引入之前（尤其是内联<style>前） - 常见错误写法：
<meta name="viewport" content="width=device-width">—— 缺少initial-scale=1.0，iOS Safari 会强制缩放导致视口宽度失真 - 更糟的写法：
<meta name="viewport" content="width=320">—— 固定像素值会锁定视口，让max-width断点完全失效 - 不要用
user-scalable=no掩盖问题：它禁用缩放，但不修复视口逻辑，反而让调试更难
为什么 DevTools 模拟正常，真机却失效
Chrome DevTools 的响应式模拟器默认启用标准 viewport 行为，即使你 HTML 里漏了标签，它也会“帮忙补上”。
本文共计784个文字，预计阅读时间需要4分钟。
标签缺失或配置错误，媒体查询基本不会启动。
媒体查询依赖浏览器对视口（viewport）的正确解析。如果 <meta name="viewport"> 标签没写、写错位置、或属性值有误，移动端浏览器会以桌面模式渲染页面——此时所有 @media 规则都处于“待机状态”，压根不参与样式计算。
- 必须放在
<head>内，且在任何 CSS 引入之前（尤其是内联<style>前） - 常见错误写法：
<meta name="viewport" content="width=device-width">—— 缺少initial-scale=1.0，iOS Safari 会强制缩放导致视口宽度失真 - 更糟的写法：
<meta name="viewport" content="width=320">—— 固定像素值会锁定视口，让max-width断点完全失效 - 不要用
user-scalable=no掩盖问题：它禁用缩放，但不修复视口逻辑，反而让调试更难
为什么 DevTools 模拟正常，真机却失效
Chrome DevTools 的响应式模拟器默认启用标准 viewport 行为，即使你 HTML 里漏了标签，它也会“帮忙补上”。