美图手机WebView因定制ROM导致viewport解析异常，需UA识别+JS强制重设viewport+rem布局+禁用vw/vh/px。
美图手机（尤其是早期 M4、M6、V6 等机型）使用的是 16:10 或接近 21:9 的窄高全面屏，但系统 WebView（特别是 Android 5.0–7.0 上的旧版 Chrome 内核或系统 WebView）对 viewport 的解析存在兼容性问题，直接套用常规「刘海屏/水滴屏」适配方案会失效。
为什么 viewport width=device-width 在美图手机上不生效
美图定制 ROM 的 WebView 对 width=device-width 解析异常：它返回的 window.innerWidth 常为 360px 或 384px（逻辑像素），但实际物理分辨率高达 1080×1920，导致 CSS 布局被错误压缩，文字变小、按钮错位、横向滚动条意外出现。
- 典型现象：
document.documentElement.clientWidth返回 360，但screen.width是 360，screen.availWidth却是 1080 —— 说明设备报告了缩放后的逻辑宽度，但未正确同步到 layout viewport - 不是 DPR 问题：这些机型
window.devicePixelRatio多为 3，但 CSS 像素仍按错误逻辑宽度计算 - 不能依赖
meta name="viewport" content="width=device-width, initial-scale=1"单独解决
强制重设 layout viewport 的 JS 方案
在 中尽早执行 JS，绕过系统 WebView 的 viewport 解析缺陷，手动设置 layout viewport 宽度为物理宽度 / DPR。
- 先用
screen.width * window.devicePixelRatio估算真实物理宽度（美图多数机型为 1080） - 再反推应设的
width值：例如物理宽 1080、DPR=3 → 应设width=360？错。实际要设width=1080并配合initial-scale=0.333，但 scale 小数精度易出错 - 更稳做法：直接写死
width=360+ 动态修正initial-scale，并禁用用户缩放
CSS 配合：避免使用 vh/vw 和固定 px
美图 WebView 对 100vh 计算常包含状态栏甚至虚拟导航键高度，导致内容被截；固定 px 值（如 font-size: 16px）在 DPR=3 下会极小。
立即学习“前端免费学习笔记（深入）”；
- 用
rem+ 根字体动态计算：根据document.documentElement.clientWidth设置font-size，但需注意该值在美图上初始为 360，可直接用 - 慎用
vh：改用min-height: calc(100% - 44px)或 JS 动态设高度 - 图片适配：不用
width: 100vw，改用width: 100%+max-width: 100%，防止溢出
真机调试与 UA 判断要点
仅靠 UA 字符串判断不够可靠，需叠加特征检测；且部分美图机型 UA 中不含 "Meitu"，而是含 "MT" 或 "M4"。
- UA 示例：
Mozilla/5.0 (Linux; Android 6.0; M4 Build/MRA58K) AppleWebKit/537.36 - 必须同时检查：
navigator.userAgent.indexOf('MT') !== -1 || navigator.userAgent.indexOf('Meitu') !== -1 || navigator.userAgent.indexOf('M4') !== -1 || navigator.userAgent.indexOf('M6') !== -1 - 上线前务必用真实美图 M4/M6/V6 测试：Chrome DevTools 的 device emulation 无法模拟其 WebView 行为
- 若使用 Cordova 或 uni-app，需在
webview初始化后延迟 100ms 再执行 viewport 重设，否则 DOM 未就绪
美图手机的 WebView 兼容性本质是「老内核 + 定制缩放策略」，没有银弹方案。最稳妥的做法是：UA 特征识别 + JS 强制 viewport 重写 + rem 布局 + 所有尺寸脱离 vw/vh/px 绝对值。漏掉任意一环，都可能在某个美图固件版本上白屏或布局崩溃。
