正确写法是将<meta name="viewport" content="width=device-width, initial-scale=1.0">置于<head>最开头、紧贴<meta charset="utf-8">之后，且不可动态插入或添加缩放限制。
直接在 HTML 文件的 <head> 标签最开头写一行正确的 <meta name="viewport">，就能解决绝大多数移动端显示问题。关键不是“加了没”，而是“位置对不对、参数配不配对、有没有多余限制”。
必须放在 <head> 最前面
浏览器是顺序解析 HTML 的，viewport 必须在首次渲染前生效。如果它被塞在 CSS 或 JS 后面、被框架动态插入、或者夹在其他 meta 标签中间，Safari 和多数安卓 WebView 都会忽略它。
- ✅ 正确：紧贴
<meta charset="utf-8">后面，<head>内第一个 meta 标签 - ❌ 错误：用 JavaScript 动态添加、被 Vue 的
<client-only>包裹、SSR 模板里漏传 - ? 调试方法：打开 DevTools → Elements → 搜索
viewport；再运行document.querySelector('meta[name="viewport"]')?.content确认值没被覆盖
width=device-width 和 initial-scale=1.0 必须一起出现
这两个参数是触发“理想视口”的最小必要组合。单独写任何一个，都可能让页面在某些设备上缩得太小、拉得太宽，或出现横向滚动。
- ✅ 推荐最小配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 危险写法：
width=375（折叠屏横屏直接崩）、width=1200（小屏强制拉伸）、只写initial-scale=1.0不带width=device-width - ⚠️ 注意：
device-width是设备经 DPR 换算后的 CSS 像素宽度（比如 iPhone 15 是 393px），不是物理像素，硬写死数值毫无意义
慎用 user-scalable=no 和 maximum-scale=1.0
这类限制在 2026 年已基本失效，且违反可访问性标准。iOS 16+ Safari 会主动忽略 user-scalable=no，Android 各厂商行为也不一致，强行禁用缩放会让视障用户和老年用户无法阅读。
立即学习“前端免费学习笔记（深入）”；
- ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0—— 锁死所有缩放能力 - ✅ 更稳妥的做法：去掉这些限制，改用 CSS 控制特定区域的手势行为，或确保字体、间距、按钮尺寸本身具备可读性
- ⚠️ 特殊场景例外仅限 Kiosk 自助终端，且需 native 层配合接管缩放逻辑
写了 viewport 还乱？先查内容是否溢出视口
initial-scale=1.0 不是万能锁。常见真因是 CSS 或 HTML 元素破坏了流式布局：
- 避免写死宽度：
width: 375px改成width: 100%或max-width: 100vw - 图片加约束：
img { max-width: 100%; height: auto; } - 字体别用固定 px：
font-size: 16px改为font-size: 1rem或结合 rem/flex 动态调整 - 检查是否有父容器未清除浮动、flex 容器未设
flex-wrap: wrap、绝对定位元素超出边界等
不复杂但容易忽略。把 viewport 放对位置、配对两个核心参数、放开缩放权限、再理顺 CSS 流式逻辑，移动端适配就稳了。
