viewport meta 标签必须置于 head 中 charset 后首位，否则 iOS Safari 等会启用 980px 桌面模式导致所有 CSS 响应式失效；CSS 仅能补漏校准，前提为 viewport 正确生效。
viewport 设置问题不能只靠 CSS 解决，meta 标签才是前提；CSS 只能补漏、校准、防抖，且必须在 viewport 正确生效后才起作用。
viewport meta 必须先写对，否则 CSS 全部失效
浏览器解析 HTML 是顺序执行的。如果 <meta name="viewport"> 没出现在 <head> 最前面（紧贴 <meta charset> 后），iOS Safari 和多数 Android WebView 会直接启用桌面模拟模式（布局视口固定为 980px），此时所有媒体查询、100vw、rem 基准都会错乱——你写的任何 CSS 都无法扭转这个底层渲染状态。
- ✅ 正确位置：
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0">...</head> - ❌ 常见错误：用 JS 动态插入、被 Vue/React 的 SSR 模板挤到后面、CMS 自动追加第二个
viewport覆盖前一个 - ⚠️ 验证方法：真机访问后，在 Safari Web Inspector 或 Chrome 远程调试中执行
document.documentElement.clientWidth，若远大于设备逻辑宽度（如 iPhone 14 Pro 应为 390），说明viewport根本没生效
body 默认 margin 和 box-sizing 是白边元凶
左右白边常被误认为是缩放不准，实际多来自浏览器默认样式叠加渲染精度误差。即使 viewport 写对了，body 的 margin: 8px 在高 DPR 设备上会被放大，加上未重置的 box-sizing，width: 100% 容器实际宽度就超出了视口。
- 必须重置：
body { margin: 0; } - 必须声明：
* { box-sizing: border-box; }（含伪元素） - 必须截断溢出：
body { overflow-x: hidden; }——不能只加在某个子容器上，溢出可能来自任意层级 - 慎用
viewport-fit=cover：仅在需要全屏沉浸式体验（如游戏、视频）时启用；普通 H5 加了反而触发 iOS 安全区重算，导致边缘错位
text-size-adjust 干扰 rem 布局
iOS Safari 对小于 16px 的文本默认强制放大（Font Boosting），这会撑开容器、破坏 rem 基准，且不受 viewport 控制。表现是段落文字突然变大、卡片高度崩塌、横向滚动重现。
立即学习“前端免费学习笔记（深入）”；
- 禁用方式（作用于需精确控制的容器）：
-webkit-text-size-adjust: 100%; text-size-adjust: 100%; - ❌ 禁止写
none：iOS 13+ 已不支持，且会禁用系统字体设置，违反可访问性 - ⚠️ 不要全局写在
html或body上：影响老年用户和视障用户的系统级字体缩放 - 若用 Vue/React，确保该样式在首次 render 前已注入，否则 hydration 阶段仍会闪现放大
缩放抖动必须用 transform 替代 zoom
双击或输入框聚焦时内容跳动，根本原因是浏览器动态调整了视觉视口 scale，而 zoom 是非标准属性，已被 iOS Safari 和新版 Chrome 移除。强行使用会触发重排，加剧抖动。
- ✅ 局部缩放用：
transform: scale(1.2); transform-origin: center; - ⚠️ 切勿对
body或html直接scale：这会连带改变视口计算逻辑，反而让白边和抖动更严重 - 配合防抖：
transition: transform 0.2s ease;，避免突兀变化 - 替代
user-scalable=no的更优方案：touch-action: manipulation;（允许滚动，禁用双击缩放），兼容性更好且不锁死辅助功能
真正难的不是写几行 CSS，而是确认 viewport 在所有设备、所有 WebView 环境下都稳定生效——它既可能被框架模板覆盖，也可能被第三方 SDK 动态重写，还可能因内联样式顺序错乱而失效。每次发版前，务必在微信、支付宝、QQ、Safari、Chrome 真机上逐个验证 document.querySelector('meta[name="viewport"]')?.content 的值。
