为什么需要 App 注入 --safe-area-inset-top 给 H5
刘海、灵动岛、挖孔屏普及之后，App 里打开的 H5 常会出现一种「很小但很伤体验」的问题：顶栏、返回、标题被状态栏挡住；或者反过来顶出一大截空白。浏览器里用 env(safe-area-inset-top) 就能处理的事，一进 WebView，却经常拿不到可靠数值。
所以很多壳会在加载 H5 时，由原生算好安全区，再注入 CSS 变量——比如 --safe-area-inset-top。下面说清「为什么必须注入」，以及 H5 侧怎么用。
1）安全区到底在解决什么
屏幕可用矩形，和「内容不该被系统 UI 盖住的区域」不是一回事。顶部要避开状态栏 / 刘海 / 灵动岛，底部常要避开 Home Indicator。CSS 把四边余量叫作 safe-area-inset：
top
顶部不可放关键控件的高度，通常对应状态栏 + 刘海侵占。
bottom / left / right
底横条、横屏左右圆角等。导航栏、吸底按钮、全屏页都可能用到。
安全区不是设计稿上的「多留 20px」，而是设备相关、会变的数值：机型不同、横竖屏不同、是否隐藏状态栏都不同。
H5 顶栏若写死 padding-top: 20px，在无刘海旧机偏大、在灵动岛机型又不够——这就是要「动态 inset」的原因。
2）标准做法：env() + viewport-fit=cover
在 Safari 等浏览器里，常见组合是：
viewport
<meta name="viewport" content="…, viewport-fit=cover">，让页面可以画到安全区外侧（全屏铺底）。
样式
padding-top: env(safe-area-inset-top); 或加回退 constant(safe-area-inset-top)（旧 iOS）。
在系统浏览器里，这套通常够用。问题出在：同一套页面跑进 App WebView 时，环境变了。
3）为什么 WebView 里 env() 经常不够用
App 内嵌 H5 不是「缩小版 Safari」。WKWebView / Android WebView 的窗口配置、是否延伸到状态栏下方、是否由原生自己画导航，都会让 env(safe-area-inset-*) 变成 0、不稳定，或和视觉上的「缺口」对不齐。
1. WebView 未真正「铺满」物理屏
若原生已把 WebView 布局在安全区内部，H5 再读 inset 往往是 0——但产品又要求 H5 自己画顶栏并顶到屏幕上沿时，就会对不上。
2. 状态栏由原生托管
沉浸式、透明状态栏、自定义导航叠在 WebView 上时，浏览器那套 safe-area 语义与「还要给 H5 顶栏留多少」经常脱节。
3. 时机与机型差异
首屏 CSS 计算时 inset 还未就绪、旋转后未更新、Android 厂商 WebView 行为不一致——都会让纯 env() 方案在壳里翻车。
一句话：知道安全区真实像素的是原生；H5 只能猜，除非有人把数告诉它。
所以不是「H5 不会写 env()」，而是在壳场景下，可信数据源在 App。
4）App 注入 --safe-area-inset-top 的意义
原生在创建 / 展示 WebView 时，读取系统安全区（或自己布局算出的顶部偏移），写进页面，例如：
:root { --safe-area-inset-top: 47px; }
或通过 JS document.documentElement.style.setProperty('--safe-area-inset-top', '47px')。
为什么是 CSS 变量而不是写死 class
H5 多页面、多组件都能 var(--safe-area-inset-top) 复用；原生只维护一处注入。
为什么常叫 --safe-area-inset-top
与标准 env 名对齐，前端心智统一；也可以同时提供 bottom / left / right，按壳能力注入。
和 env() 怎么并存
常见写法：优先用注入变量，浏览器场景回退 env——例如 padding-top: var(--safe-area-inset-top, env(safe-area-inset-top, 0px));。
「CaboKit」侧约定：壳负责真值，H5 负责消费。前端不再为每台机「估高度」，原生保证旋转、刘海机切换时更新变量。
5）H5 侧怎么用（约定）
顶栏 / 固定头
padding-top: var(--safe-area-inset-top, 0px); 或 height: calc(44px + var(--safe-area-inset-top, 0px));。
全屏背景
背景可铺满；可点区域、文字、按钮仍落在安全区之内。
不要二次硬编码
避免再写死 44 / 88 除非做「无变量时的桌面预览兜底」；真机以注入值为准。
若壳还能在横竖屏、分屏、折叠态回调更新，H5 只需继续读变量，不必监听一堆原生事件。
❓ FAQ
只有 top 要注入吗？
看产品。有吸底栏、全面屏手势条时，bottom 同样关键；横屏页可能还要 left / right。
纯手机浏览器打开同一 H5 怎么办？
用 var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) 回退；并带上 viewport-fit=cover。
注入晚于首屏绘制？
原生应尽量在首屏前写入；若做不到，H5 需接受一次轻微跳动，或先用保守 min-height / 骨架避免内容顶进刘海。
📝 补充说明：安全区是协作协议：App 提供可靠数字，H5 用变量布局。只改一边（只写 env，或只盲加 padding），刘海机上的顶栏问题会反复出现。
继续阅读
👇 同标签更多，或返回文章列表
上一篇：HLS 对照实验：TS·200+Range、JPG·206 与 JPG·200·下一篇：H5 在 Android 真机调试：从 Android Studio 到 chrome://inspect