viewport必须写在最前面且静态声明，紧贴后；width=device-width和initial-scale=1.0必须配对出现，缺一不可；禁用user-scalable=no等锁死缩放属性，并排查css溢出导致的横向滚动。
viewport 必须写在 最前面，且不能动态插入
浏览器顺序解析 HTML，viewport 标签必须在首次渲染前生效。塞在
里、用 JS 执行document.head.appendChild()、或被 Vue 的 <client-only></client-only> 包裹，Safari 和多数 Android WebView 都会直接忽略。
✅ 正确位置：紧贴 <meta charset> 后，
❌ 错误做法：SSR 模板漏传、CMS 自动生成两个 viewport（以第一个为准，但中间已错乱）、Next.js 的
getServerSideProps 里没透出
调试方法：document.querySelector('meta[name="viewport"]')?.content 确认值未被覆盖；DevTools → Elements → 搜索 viewport 查看实际生效的标签位置和内容
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 像素宽度，不是物理像素。硬写死数值毫无意义——iPhone 15 竖屏是 393px，横屏变成 852px；Pixel 8 是 412px；iPad 是 768px 或 834px。设计稿按 375px 做，不代表 viewport 就该设成 375
user-scalable=no 和 maximum-scale=1.0 基本该删掉
加了 user-scalable=no，iOS 16.4+ 已限制生效，Safari 会主动忽略；Android 各厂商 WebView 行为不一致；而 maximum-scale=1.0 会禁用系统级「更大字体」和辅助缩放，违反 WCAG 可访问性要求。
⚠️ 特殊例外仅限 Kiosk 自助终端、或嵌入 WebView 且 native 层已统一接管缩放（需客户端配合）
✅ 合理替代：用 CSS 控制特定容器可缩放，例如 touch-action: pan-x pan-y 限制拖拽方向，或对表单区域保留缩放能力
强行锁死所有缩放能力，老年用户和视障用户无法使用——这不是“防误触”，而是把人挡在门外
写了 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 里写了
transform: scale()，与 viewport 冲突
检查所有 width 值：优先用 %、vw、rem，避免 px 固定宽
给 img、video、table 加全局样式：img, video, table { max-width: 100%; height: auto; }
Chrome DevTools 中开启「Toggle device toolbar」→「Show rulers」，一眼看出是否有内容超出视口——这才是问题根因，不是 viewport 写错了
