移动端适配问题90%源于viewport meta标签配置错误：必须静态写在<head>最前，且content需同时含width=device-width和initial-scale=1.0；禁用user-scalable=no以保障可访问性；还需排查CSS溢出及第三方脚本篡改。
移动端页面缩成一团、文字小得看不清、横向滚动条莫名其妙出现——90% 是 viewport meta 标签没写对，而不是 CSS 或 JS 的问题。
viewport 必须静态写在 <head> 最前面
浏览器顺序解析 HTML，viewport 必须在首次渲染前生效。塞在 <body> 里、用 JS 动态插入（比如 document.head.appendChild()）、或被框架的 <client-only> 包裹，Safari 和多数 Android WebView 都会直接忽略。
- ✅ 正确位置：紧贴
<meta charset>后，<head>内最靠前处 - ❌ 错误做法：SSR 模板漏传、CMS 拼接时重复注入两个
viewport（浏览器只认第一个，但中间已按错误规则渲染过） - ? 调试方法：查看「网页源代码」（不是开发者工具 Elements 面板），搜索
<meta name="viewport"，确认只出现一次且位置正确
width=device-width, initial-scale=1.0 必须成对出现
单独写 width=device-width，iOS Safari 可能仍按 980px 渲染再缩小；只写 initial-scale=1.0，Android Chrome 会无视设备宽度，导致横向滚动或按钮点击偏移。
- ✅ 推荐最小有效配置：
<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 16.4+ 已限制生效；Android 行为不一致；更关键的是，它直接违反 WCAG 可访问性标准，视障用户无法放大文本阅读。
立即学习“前端免费学习笔记（深入）”；
- ✅ 如需允许缩放（推荐）：直接省略
user-scalable—— 它默认就是yes - ❌ 高危组合：
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>写了固定width: 375px（在 iPhone 13 上没问题，在 Pixel 7 上就溢出） -
<img>没设max-width: 100%，撑开父容器 - 用 Chrome DevTools 的「Toggle device toolbar」+ 「Capture screenshot」看真实渲染宽度，别只信 CSS 声明
真正容易被忽略的点是：即使 viewport 写对了，第三方 SDK 或广告脚本可能在运行时重写它——上线后突然无法缩放，大概率是这个原因。务必在 window.onload 后执行 document.querySelector('meta[name="viewport"]')?.content 确认值未被篡改。
