移动端页面必须在开头添加viewport标签，内容为width=device-width, initial-scale=1；否则缩放错乱、文字过小、点击失灵；还需排查CSS强制宽度、第三方脚本覆盖及构建工具误删等问题。
不加 <meta name="viewport">，移动端页面基本等于废了一半——缩放错乱、文字小到看不见、点击区域失灵，全是因为浏览器没拿到正确的视口指令。
viewport 标签写在哪？必须放在
它得在任何 CSS 或 JS 执行前就生效，否则 iOS Safari 可能已经按默认宽度（通常是 980px）渲染完了，再改也来不及。常见错误是把它塞在 里，或者被其他 meta 标签挡在后面。
- 正确位置：
开头，<title></title>后面、<link>和<script></script>前面 - 错误写法：
<meta name="viewport" content="width=device-width, initial-scale=1">放在中 → 完全无效 - 如果用了服务端渲染或模板引擎，确认生成的 HTML 中该标签没被意外注释或遗漏
width=device-width 是基础，但别漏掉 initial-scale=1
只写 width=device-width 不够。iOS Safari 在横屏切回竖屏时可能保持上一次的缩放比例，导致内容被压缩或放大；Android Chrome 某些版本也会忽略初始缩放逻辑。加上 initial-scale=1 才算真正“重置”为 1:1 渲染。
- 最低可用配置：
<meta name="viewport" content="width=device-width, initial-scale=1"> - 禁用用户缩放（慎用）：
user-scalable=no→ 会伤害可访问性，WCAG 不推荐，尤其对视力障碍用户 -
maximum-scale=1和minimum-scale=1会锁死缩放，跟user-scalable=no效果类似，实际项目中尽量避免
为什么有时候写了 viewport 还是不响应？检查这三处
不是标签写错，而是被更高优先级的东西覆盖了。常见干扰源比你想象中更隐蔽。
立即学习“前端免费学习笔记（深入）”；
- CSS 里写了
html { width: 100vw; }或body { min-width: 1200px; }→ 强制撑开视口宽度，viewport 失效 - 第三方 SDK（比如某些统计脚本、广告 JS）动态插入了另一个
<meta name="viewport">，后写的会覆盖前写的 - 使用了 Web Components 或 Shadow DOM，而
<meta>在 shadow root 里 —— 它只对 shadow 内部生效，对外部文档无效
适配 iPad Pro 等大屏设备要额外注意 viewport-fit=cover
iPad Pro、iPhone X 及以后机型有圆角、刘海、底部指示条，viewport-fit=cover 让页面内容能真正延伸到安全区域外（需配合 CSS env() 变量使用），否则顶部/底部容易留黑边或被遮挡。
- 仅在需要全屏沉浸式体验时启用：
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover"> - 启用后必须用
padding-top: env(safe-area-inset-top)等方式避开刘海区，否则文字可能被切掉 - 这个值在非 iOS 设备上会被忽略，不影响兼容性，但别指望它解决安卓全面屏适配问题
最常被忽略的其实是「viewport 标签是否真的出现在最终返回的 HTML 中」——本地开发时看着有，上线后被构建工具（如 webpack HtmlWebpackPlugin）或 CDN 缓存策略删掉了，或者被 CMS 的富文本编辑器自动过滤了。上线前务必用手机真机访问，查看网页源码确认。
