必须添加 viewport-fit=cover 才能使 env(safe-area-inset-*) 生效；iOS 需 constant() 回退兼容，Android 无 CSS 安全区变量支持，需原生桥接或设计规避。
必须用 env(safe-area-inset-*) 配合 viewport-fit=cover，否则这些值全为 0px，留白根本不起作用。
viewport-fit=cover 是前提，不是可选项
很多项目只加了 width=device-width, initial-scale=1.0，却漏掉 viewport-fit=cover。结果是：CSS 里写了 padding-bottom: env(safe-area-inset-bottom)，但浏览器压根不返回数值——因为默认行为是 viewport-fit=auto，系统直接禁用了安全区变量。
正确写法必须包含：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
-
user-scalable=no和maximum-scale=1.0要一起上，避免 iOS 在缩放状态下错误重算安全区 - Android 9+（
DisplayCutout）虽不依赖此 meta，但为了统一行为，仍建议保留 - 仅在需要沉浸式布局的页面启用；常规有状态栏/导航栏的页面反而不该用
env() 与 constant() 的兼容写法要分层覆盖
iOS 11.2+ 支持 env()，但部分旧版 iOS（如 11.0–11.1）只认 constant()。两者不能混用在同一声明里，否则旧版会忽略整条规则。
正确顺序是：先写 constant()，再用 env() 覆盖（利用 CSS 层叠）：
body {<br> padding-top: constant(safe-area-inset-top);<br> padding-top: env(safe-area-inset-top);<br> padding-bottom: constant(safe-area-inset-bottom);<br> padding-bottom: env(safe-area-inset-bottom);<br>}
- Android 不支持这两个函数，但也不需要——它的
DisplayCutout仅影响原生层，Webview 默认不侵入顶部挖孔区 - 鸿蒙和折叠屏设备目前也仅支持
env()，无constant()兼容需求 - 别用
@supports (padding: env(safe-area-inset-top))包裹，Safari 对该语法支持不稳定
只对可能被遮挡的区域加留白，别全局滥用
安全区变量返回的是像素值（如 env(safe-area-inset-bottom) 可能是 34px），但它只应在真正延伸到屏幕边缘的容器上使用。常见误用：
- 给所有
body或html加padding，导致非全屏页底部多出空白 - 在已有固定底部 TabBar 的页面里还加
env(safe-area-inset-bottom)，造成双重留白 - 用
margin替代padding，结果外边距无法撑开父容器高度
推荐做法：
- 仅在开启沉浸式布局的页面（如启动页、视频全屏页、自定义导航栏的小程序页）应用
- 优先作用于直接子容器，例如：
.page-content { padding-bottom: env(safe-area-inset-bottom); } - 若需动态控制（如键盘弹出时隐藏底部留白），监听
resize并检查window.visualViewport?.height变化
Android 挖孔屏没有 CSS 级安全区变量，得靠 JS 或原生桥接
Android Webview（包括 Chrome、微信内置浏览器）至今不提供类似 env() 的 CSS 接口。它的 DisplayCutout API 仅对原生层开放，JS 无法直接读取挖孔尺寸。
可行方案只有两个：
- 用
screen.availHeight与window.innerHeight差值粗略估算（误差大，仅作兜底） - 在 Hybrid 场景下，由原生端通过 JSBridge 注入安全区数据，例如：
window.safeArea = { bottom: 28 }; - 微信小程序等封闭环境已封装
getSystemInfo，返回safeArea字段，可直接用
这意味着：纯 H5 项目在 Android 上无法做到像素级精准避让挖孔，只能靠设计规避（比如关键按钮不贴底、留足 44px 以上操作热区）。
最易被忽略的一点：iOS 的 env() 值在横屏时会动态交换（top 变成 left），而 Android 挖孔始终只在顶部——这个方向差异，会让试图“一套代码通吃”的适配逻辑在横屏场景下直接失效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
