viewport标签必须正确设置width=device-width和initial-scale=1.0，否则vw/vh基于错误视口计算导致横滚、字体模糊、点击不准；需配合clamp()、vmin及内容溢出控制才能实现真正适配。
viewport 标签写错或缺失，就别谈 vw/vh 适配——它连渲染起点都卡住了。
为什么写了 vw 还是横滚、字体糊、按钮点不准
根本原因不是单位选错，而是浏览器压根没按设备逻辑像素宽度去解析 CSS。比如没设 width=device-width，浏览器就默认用 980px 宽度渲染，再缩放进屏幕——这时你写 100vw 实际是 980px 的 100%，不是手机屏幕的 390px；font-size: 4vmin 也基于错误视口计算，结果失真。
- 检查
document.documentElement.clientWidth：在 iPhone 上应接近 390（不是 980） - DevTools → Elements → 搜索
meta[name="viewport"]，确认它存在且 content 值是你写的那条 - 如果用了框架（Vue/Next.js），查是否被模板覆盖或动态插入——
viewport必须静态写在<head>最前面，JS 插入无效
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（折叠屏横屏时崩）、initial-scale=1（缺width=device-width） - ⚠️ 注意：
device-width是 CSS 像素，不是物理像素，也不等于 DPR × 物理宽度——它是浏览器自动算好的逻辑宽度，硬写死数值毫无意义
用 vmin 替代 vw 控制字体和间距更稳
vw 只看宽度，横屏时文字可能突然撑大；vmin 取宽高较小者，竖屏按宽度缩、横屏按高度缩，视觉一致性更强。但单靠它还不够，小屏易过小、大屏易过大。
立即学习“前端免费学习笔记（深入）”；
- 推荐组合：
font-size: clamp(14px, 4vmin, 20px)—— 小屏保底 14px，大屏封顶 20px，中间用 4vmin 弹性过渡 - 同理，
padding、margin也建议用vmin，避免横屏时按钮被拉得过大 - ⚠️ 注意：
100vw包含滚动条宽度，iOS Safari 下偶尔多出几像素导致溢出，可加max-width: 100vw; overflow-x: hidden抑制
user-scalable=no 和 maximum-scale=1.0 基本该删掉
它们不解决实际问题，反而制造新问题：iOS 13+ 已基本无视 user-scalable=no；maximum-scale=1.0 会锁死系统级「更大字体」和辅助缩放，违反 WCAG，苹果明确不推荐。
- 真正需要控制缩放的场景（如地图、绘图），应由 JS +
touch-action: manipulation精准接管特定区域 - 禁用缩放 ≠ 解决内容溢出——90% 的横向滚动，根源是图片没设
max-width: 100%、容器没限制宽度、或 flex/grid 未约束子项 - 特殊例外仅限 Kiosk 终端或 native 层已统一接管缩放的 WebView（需客户端配合）
最常被忽略的一点：viewport 配置只是起点，不是终点。哪怕标签写对了，只要内容本身溢出视口（比如一张没设 max-width: 100% 的图、一个没约束宽度的 flex 子项），initial-scale=1.0 就会失效，浏览器被迫引入横向滚动条——这时再调单位也没用。
