viewport-fit=cover 必须与 width=device-width、initial-scale=1.0 共存才生效，否则 iOS 忽略它导致安全区变量返回 0px；避让刘海需配合 env(safe-area-inset-*)，仅 viewport-fit=cover 不自动留白。
viewport-fit=cover 必须和 width=device-width、initial-scale=1.0 同时存在
单独写 viewport-fit=cover 是无效的。iOS 会直接忽略它，env(safe-area-inset-top) 等变量返回 0px，结果是顶部留白或底部被遮挡。必须三者共存：width=device-width 动态读取设备逻辑宽度，initial-scale=1.0 触发理想视口，viewport-fit=cover 才真正生效。
常见错误现象：
- 写了
viewport-fit=cover，但顶部仍有 20px 白边 → 漏了initial-scale=1.0 - 横屏时底部内容被截断 →
width=device-width缺失，导致布局视口未随方向重算
不要只依赖 viewport-fit=cover，必须配合 env() 函数做安全区留白
viewport-fit=cover 的作用只是“允许内容延伸到刘海/小黑条区域”，它不自动帮你避让——避让要靠 CSS 的 env(safe-area-inset-*)。
典型用法：
- 顶部导航栏：加
padding-top: env(safe-area-inset-top) - 底部 TabBar：加
padding-bottom: env(safe-area-inset-bottom) - 全屏按钮需可点：用
margin-bottom: env(safe-area-inset-bottom)而非padding，避免影响点击热区
注意：env() 在 Android 和旧版 Safari（iOS padding-bottom: 34px; padding-bottom: env(safe-area-inset-bottom);
user-scalable=no 和 maximum-scale=1.0 不是可选项，而是安全区计算前提
很多项目为了“防缩放”加了 user-scalable=no，却漏掉 maximum-scale=1.0。iOS 在用户双指缩放后，会重算安全区边界，导致 env() 值异常，底部 TabBar 突然上移或消失。
正确组合是：
-
initial-scale=1.0（首次加载对齐 DPR） -
maximum-scale=1.0（禁止放大，避免安全区重算） -
user-scalable=no（禁用缩放手势，防止误触）
三者缺一不可。尤其在电商 H5 中，放大商品图后返回列表页，常出现底部按钮错位，根源就是这个组合没写全。
Android 对 viewport-fit=cover 支持有限，别指望它解决所有问题
Android WebView（包括 Chrome for Android）基本忽略 viewport-fit，env() 也仅在较新版本（Chrome 89+）部分支持。这意味着你在 iPhone 上调好的 env(safe-area-inset-bottom)，在安卓机上可能完全不生效，底部还是被手势条挡住。
务实做法：
- 优先用 JS 检测
window.visualViewport?.height和window.innerHeight差值，估算底部安全区高度 - 对安卓设备 fallback 到固定值（如
34px或44px），比依赖env()更可靠 - 真机测试必须覆盖三星 S22（圆角+底部手势）、Pixel 8（无手势条）、华为 Mate 50（动态岛类区域）等机型
最易被忽略的一点：viewport 配置只影响布局行为，不改变物理像素渲染。如果你的背景图仍被裁切，大概率是容器没撑高（缺 min-height: 100dvh）或漏了 viewport 标签本身——这些底层问题不解决，viewport-fit 再准也没用。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
