移动端网页显示过小、文字看不清、横向滚动，主因是 viewport meta 标签未正确设置：必须静态置于 head 最前，禁用 js 动态插入；width=device-width 需搭配 initial-scale=1/dpr 适配高 dpi；禁用 user-scalable=no 违反无障碍标准；全面屏需 viewport-fit=cover + env(safe-area-inset-*)。
移动端网页显示过小、文字看不清、页面横向滚动——基本都是 viewport meta 标签没设对，或设得过于激进。
为什么加了 width=device-width 还是缩放错乱？
常见现象：页面在 iPhone 上一打开就自动缩小成“小卡片”，或者左右能拖动。这不是 CSS 问题，而是浏览器根本没按你预期的宽度渲染。
根本原因：移动浏览器（尤其是 iOS Safari 和旧版 Android WebView）默认使用 layout viewport（约 980px 宽），哪怕你写了 width=device-width，如果它出现在 HTML 解析中途、被 JS 动态插入、或被框架（如 Vue/React）延迟注入，就可能失效。
- 确保
<meta name="viewport">是静态写在最前面，**不能靠 JS 插入** - 在 Vue CLI 项目中，改
public/index.html；Next.js 中用next/head组件包裹；纯 HTML 就直接贴在开头 - 检查是否有多余空格导致解析失败，比如
content="width=device-width, initial-scale=1.0"写成了content = "width=device-width..."（等号前后有空格会失效）
initial-scale=1.0 不生效？可能是 DPR 没对齐
在高 DPI 屏幕（如 iPhone 14 的 Retina 屏，devicePixelRatio === 3）上，只写 initial-scale=1.0 会导致字体/边框发虚——因为 1 CSS 像素 ≠ 1 物理像素。
真正要的是：让 1 个 CSS 像素对应 1 个设备独立像素（DIP），而不是物理像素。所以有些项目会动态计算：
const dpr = window.devicePixelRatio || 1;
const scale = 1 / dpr;
document.querySelector('meta[name="viewport"]').setAttribute(
'content',
`width=device-width, initial-scale=${scale}, maximum-scale=${scale}, user-scalable=no`
);
但注意：user-scalable=no + maximum-scale 等同于锁死缩放，**会违反 WCAG 无障碍标准**，尤其对视力障碍用户不友好。生产环境慎用。
要不要禁用用户缩放？user-scalable=no 的真实代价
很多老教程推荐加 user-scalable=no 防止双击放大后布局崩坏，但它带来的副作用更实际：
- iOS Safari 在
user-scalable=no下，input聚焦时仍会强制放大（为可读性），但缩放后不会自动恢复，导致页面“卡住” - Android Chrome 对该属性支持不一致，部分版本直接忽略
- 视障用户依赖双指缩放阅读正文，禁用等于主动排除这部分人群
- 如果你真需要防误触，优先用 CSS
touch-action: manipulation控制手势，而非粗暴禁用缩放
全面屏/刘海屏适配必须加 viewport-fit=cover
iPhone X 及之后机型、部分安卓全面屏手机，顶部状态栏和底部 Home 指示条会“侵入”网页内容区。只靠 width=device-width 无法解决。
正确做法是补上 viewport-fit=cover，并配合 CSS 安全区变量：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
然后在 CSS 中用 env(safe-area-inset-top) 等安全区环境变量做留白：
body {
padding-top: env(safe-area-inset-top);
padding-bottom: env(safe-area-inset-bottom);
}
注意：viewport-fit 只在 iOS Safari 和较新 Android 浏览器中生效，且仅当 content 值含 cover 时才触发安全区计算——写成 contain 或漏掉它，刘海区域照样会被遮挡。
最常被忽略的一点：viewport 设置不是“写完就完事”。它和 CSS 媒体查询、rem 基准、甚至 transform: scale() 动画都会互相影响。调试时优先用 Chrome DevTools 的 Device Mode 查看实时 viewport 宽度，别只盯着设计稿像素数。
