viewport-fit=cover 必须与 width=device-width 和 initial-scale=1.0 同时使用才生效，缺一不可；仅写 viewport-fit=cover 会被 ios safari（11.2+）忽略，页面仍受限于安全区。
viewport-fit=cover 必须和 width=device-width 一起用才生效
只写 viewport-fit=cover 不起作用，iOS Safari（11.2+）会直接忽略它。必须搭配 width=device-width 和 initial-scale=1.0 才能触发全屏渲染逻辑。漏掉其中任何一个，页面就还是被框在安全区内，顶部留白、底部按钮被 Home Indicator 遮挡。
常见错误写法：<meta name="viewport" content="viewport-fit=cover"> —— 缺少基础参数，等于没写。
正确写法示例：
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
-
width=device-width是前提：告诉浏览器按设备物理宽度渲染 -
initial-scale=1.0不可省：否则 iOS 可能默认放大文本，导致横向滚动 - 顺序无关，但三者缺一不可；
user-scalable=no建议不加，既已失效又影响可访问性
env(safe-area-inset-bottom) 要和 constant() 同时声明才能兼容老 iOS
加了 viewport-fit=cover 后，env(safe-area-inset-bottom) 才有值（否则恒为 0px）。但 iOS 11.0–11.1 只认 constant()，11.2+ 才支持 env()。单独用某一个，老机型会留白不足或过度留白。
吸底元素（如 TabBar）推荐这样写：
padding-bottom: constant(safe-area-inset-bottom);<br>padding-bottom: env(safe-area-inset-bottom);
- 浏览器按顺序解析，优先使用后声明的值（
env()覆盖constant()） - 用
padding-bottom而非margin-bottom：避免 fixed 元素脱离文档流后定位异常 - 不能只靠
@supports判断：部分安卓 WebView 对env()支持不一致，建议始终 fallback
Android 设备对 viewport-fit=cover 完全忽略，但无副作用
Android 系统 WebView 和 Chrome for Android 都不识别 viewport-fit 属性，写了也不会报错或影响布局。这意味着你可以放心在所有移动端 HTML 中统一加上它，不用做 UA 判断或条件注入。
- 写上它，iOS 正常适配；不写，iOS 就缩在安全区里
- 别试图用 JS 检测是否支持：
matchMedia('(environment-vars: safe-area-inset-top)')不可靠，且安卓返回 false 也不代表不能用 - 真正要区分的是“是否需要避让底部横条”——这得靠设备特征（如
screen.height - screen.availHeight > 50）或 UA 字符串粗略判断
fixed 定位元素在刘海屏下容易被遮挡，光靠 env() 不够
即使用了 env(safe-area-inset-top) 给 header 加 padding，如果它是 position: fixed 且没设 top: 0，在某些 iOS 版本下仍可能被状态栏吞掉顶部像素。这不是 bug，是 WebKit 渲染层对 fixed 元素 + 安全区变量的处理差异。
- 必须显式设置
top: env(safe-area-inset-top)，而不是仅靠父容器 padding - 避免嵌套多层 fixed 元素：外层 fixed + 内层 fixed 在全面屏上容易错位
- 全屏类场景（如 WebGL、视频播放器）建议用
position: absolute+inset: 0替代 fixed，更可控
最易被忽略的一点：viewport-fit=cover 开启后，document.documentElement.clientHeight 返回的是整个屏幕高度（含状态栏），不是安全区高度。如果你用 JS 动态计算区域，得手动减去 safe-area-inset-top 和 safe-area-inset-bottom，不能直接信 DOM 尺寸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
