viewport-fit=cover仅让内容延伸至屏幕边缘，不自动避开安全区域，必须配合env()函数设置内边距或外边距才能防止被刘海、小黑条遮挡。
viewport-fit=cover 本身不能“适配”安全区域，它只是让页面内容**延伸到屏幕边缘（包括刘海、圆角、小黑条）**，后续必须配合 env() 或 constant() 函数手动避开危险区，否则文字/按钮会被遮挡。
为什么加了 viewport-fit=cover 还是被刘海挡住？
因为 viewport-fit=cover 只是告诉 Safari（仅 iOS 11.2+ 支持）：“别把我的网页缩放到安全区域内”，它不自动调整布局。页面仍按默认视口渲染，顶部导航栏、固定定位按钮等会直接顶到状态栏下方——也就是刘海正下方。
常见错误现象：
- 固定定位的
header文字被刘海切掉上半部分 - 全屏轮播图底部被 iPhone X 及以后机型的“小黑条”遮住
- 弹出层
position: fixed; bottom: 0离屏幕底边有明显空隙（其实是留给了安全区域，但你没用上）
必须搭配 env() 使用才能真正避开安全区域
env() 是 iOS Safari 提供的 CSS 环境变量，用于读取系统定义的安全边距。只有在 <meta name="viewport" content="viewport-fit=cover"> 生效的前提下，env() 的值才非零。
关键环境变量：
-
env(safe-area-inset-top)：刘海/状态栏高度（iPhone X ~ 14 Pro 约 44px，15 Pro 约 50px） -
env(safe-area-inset-bottom)：小黑条高度（通常 34px） -
env(safe-area-inset-left)/env(safe-area-inset-right)：圆角侧边距（多数场景为 0）
典型用法示例：
.header {
padding-top: env(safe-area-inset-top);
}
.fixed-bottom-bar {
padding-bottom: env(safe-area-inset-bottom);
}
.fullscreen {
margin-top: env(safe-area-inset-top);
margin-bottom: env(safe-area-inset-bottom);
}
注意：env() 在不支持的浏览器中会退化为 0，无需额外降级处理；但旧版 iOS（
constant() 已废弃，别再用了
iOS 11.2 之前曾用 constant()（如 constant(safe-area-inset-top)），但它在 iOS 11.2+ 中已被移除。现在只保留 env()。如果你看到老项目里还在写 constant()，务必替换成 env()，否则在新版 Safari 中这些值永远是 0。
兼容写法（不推荐，仅作过渡参考）：
.header {
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
}
但实际没必要——现代项目应直接用 env()，Safari 以外的浏览器忽略它不影响布局。
viewport-fit=cover 对其他平台完全无效
这个属性是 WebKit 私有扩展，仅在 iOS Safari（及基于 WebKit 的 WKWebView）中起作用。Android Chrome、Firefox、Edge、桌面 Safari 全部忽略 viewport-fit=cover，也不会暴露 env() 变量。
这意味着：
- 不要指望它解决安卓全面屏（如水滴屏、挖孔屏）的适配问题
- 微信内置浏览器（iOS 版）基于 WKWebView，支持；安卓微信基于 X5 内核，不支持
- 如果你需要跨平台安全区适配，得靠 JS 检测（如
window.visualViewport+ UA 判断）或服务端 UA 分流
最易被忽略的一点：即使加了 viewport-fit=cover 和 env()，如果页面存在横向滚动、缩放或强制设置了 width=device-width 但内容溢出，Safari 仍可能回退到默认安全视口行为——此时 env() 值仍为 0。务必确保视口宽度与内容匹配，且禁用用户缩放（user-scalable=no 虽然不推荐，但在某些全屏 H5 场景下是必要兜底）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
