viewport 设置错误是布局比例失真的主因，必须紧贴 放在 最前面，且 width=device-width 与 initial-scale=1.0 缺一不可；禁用 user-scalable=no 等高危组合，iOS 需加 html {-webkit-text-size-adjust:100%} 防文本放大干扰。
布局比例不对，八成是 viewport 没设对，或者设了但被覆盖、写错位置、参数冲突——不是 CSS 写得不好，而是浏览器压根没按你期望的“宽度”去解析 100vw 和媒体查询。
viewport 必须紧贴 <meta charset> 放在
浏览器顺序解析 HTML，viewport 必须在首次渲染前生效。一旦布局视口按默认 980px 初始化完成，后面再插、再改都无效。
- ✅ 正确顺序：
<meta charset="UTF-8">→<meta name="viewport" content="width=device-width, initial-scale=1.0">→<title></title> - ❌ 常见错误：被 CMS 注入到
<title></title>后面；被 Webpack 的html-webpack-pluginminify 删除注释后挤到中间；写在里；用 JS 动态 append - ? 调试方法：右键「查看网页源代码」，确认原始 HTML 中这两行是否紧挨着
开始；再执行document.querySelector('meta[name="viewport"]')?.content看取到的值是不是你写的那个
width=device-width 和 initial-scale=1.0 必须同时存在
缺一不可。只写前者，iOS Safari 可能仍按 980px 渲染再缩小；只写后者，CSS 中的 100vw 还是 980px，媒体查询断点不触发，高 DPR 屏（如 iPhone 15 的 3x）上 border 渲染变粗、Canvas 尺寸错乱。
- ✅ 推荐最小可用配置：
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - ❌ 危险写法：
width=375（横屏直接崩）、width=1200（小屏拉伸变形）、initial-scale=1.0单独出现 - ⚠️ 注意：
device-width是设备逻辑像素宽（如 iPhone 14 Pro 竖屏为 430px），不是物理像素，也不是设计稿基准，硬写死数值毫无意义
别碰 maximum-scale=1.0 和 user-scalable=no
这俩组合在 iOS 13+ 会被降权，甚至弹提示“该网站可能无法正常工作”，更关键的是违反 WCAG 2.1 可访问性标准——视力障碍用户开启系统「更大字体」后，文字会被截断、按钮点不到。
立即学习“前端免费学习笔记（深入）”；
- ✅ 合理替代：
touch-action: manipulation控制区域手势；或用 CSS 限制特定容器可缩放 - ❌ 高危组合：
user-scalable=no, maximum-scale=1.0, minimum-scale=1.0——业务页面请删掉 - ? 补充：如果项目需兼容微信旧版（v6.5.x），可追加
target-densitydpi=device-dpi（仅 Android WebView 有效，现代已弃用）
布局比例失真时，先检查 text-size-adjust 干扰
iOS Safari 默认会对小于 16px 的文本做自动放大，这会撑开容器、破坏 rem 布局，且不受 viewport 控制。现象是段落文字突然变大、容器高度异常、媒体查询失效。
- ✅ 解决方案：显式关闭它，加 CSS 规则
html { -webkit-text-size-adjust: 100%; } - ⚠️ 注意：不要写
text-size-adjust: none（已废弃），也不要只作用于p或div，必须作用于html或body - ? 如果用了 rem，确保根元素
font-size基于视口宽度而非设备像素比，否则高 DPR 设备上字体会过小
真正难调的不是怎么写，而是怎么确保它没被框架、CMS、构建工具或第三方 SDK 悄悄覆盖——每次改完，务必查源码、看 DevTools Elements 里的原始 meta 值，而不是只信 console.log 或客户端渲染结果。
