viewport标签必须放在最前面且配对写width=device-width和initial-scale=1.0，禁用user-scalable=no等限制缩放属性，并排查css溢出问题。
移动端页面文字糊、点不准、横向滚动，八成是 viewport 标签没写对，或者压根没写——它不是可选项，而是浏览器渲染的开关。
viewport 必须放在
浏览器顺序解析 HTML，viewport 必须在首次渲染前生效。塞在 里、用 JS 执行 document.head.appendChild()、或被 Vue 的 <client-only></client-only> 包裹，Safari 和多数 Android WebView 都会直接忽略。
- ✅ 正确位置：紧贴
<meta charset>后，内最靠前处 - ❌ 错误做法：SSR 模板漏传、CMS 自动生成两个
viewport（以第一个为准，但中间已错乱）、Next.js 的getServerSideProps里没透出 - ? 调试方法：DevTools → Elements → 搜索
viewport；再执行document.querySelector('meta[name="viewport"]')?.content确认值未被覆盖
width=device-width, initial-scale=1.0 必须配对，不能只写其一
只写 width=device-width，iOS Safari 可能仍按 980px 渲染再缩小；只写 initial-scale=1.0，某些安卓 WebView 会无视设备宽度，导致横向滚动。两者缺一不可。
- ✅ 推荐最小可用配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 危险写法：
width=375（折叠屏横屏崩）、width=1200（小屏强制拉伸）、initial-scale=1不带width=device-width - ⚠️ 注意：
device-width是经 DPR 换算后的 CSS 像素宽度，不是物理像素，硬写死数值毫无意义
user-scalable=no 和 maximum-scale=1.0 基本该删掉
加了 user-scalable=no，iOS 13+ 已基本无视；Android 行为不一致；而 maximum-scale=1.0 会禁用系统级「更大字体」和辅助缩放，违反 WCAG 可访问性要求，苹果也明确不推荐。
- ✅ 合理替代：
touch-action: manipulation控制区域手势，或用 CSS 限制特定容器可缩放 - ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0—— 锁死所有缩放能力，老年用户和视障用户无法使用 - ⚠️ 特殊例外仅限 Kiosk 自助终端、或嵌入 WebView 且 native 层已统一接管缩放（需客户端配合）
写了 viewport 还是不正常？先查内容是否溢出视口
initial-scale=1.0 不是万能锁。常见真因是 CSS 或 HTML 元素破坏流式布局：
-
width: 100vw加上padding或border导致实际超宽 - 某个
<div> 写了固定 <code>width: 375px（在 iPhone 13 上没问题，在 Pixel 7 上就溢出） -
<img>没设max-width: 100%和height: auto，撑开父容器 - CSS 里写了
html { zoom: 0.8; }或transform: scale()，与viewport缩放冲突
检查所有宽度值：优先用 %、vw、rem，避免 px 固定宽；给 img、video、table 加全局样式：img, video, table { max-width: 100%; height: auto; }。
