实现H5移动端全屏沉浸式状态栏需三步协同：1. viewport-fit=cover声明；2. 用env(safe-area-inset-*)动态预留安全区；3. App内嵌时JS获取真实状态栏高度并动态设置padding。
要让 H5 页面在移动端实现真正的全屏沉浸式状态栏效果，关键不是“隐藏状态栏”，而是让内容合理延伸到状态栏区域，同时确保交互元素不被遮挡。核心在于三步协同：视口声明、安全区适配、动态布局控制。
1. viewport-fit=cover 是全屏渲染的前提
必须在 <head> 中设置带 viewport-fit=cover 的 viewport 标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
这个属性告诉 iOS Safari 和现代 Android WebView：允许页面内容渲染到整个可视窗口，包括状态栏和底部手势条区域。没有它，env(safe-area-inset-*) 变量不会生效，CSS 也无法真正“破界”。
2. 用 safe-area-inset-* 动态预留安全空间
仅靠 cover 不够——它会让内容铺满，但也可能把按钮盖进刘海里。所以要用 CSS 环境变量主动避让关键区域：
-
顶部状态栏区域：给 header 或 body 添加
padding-top: env(safe-area-inset-top)（iOS 11.2+）；兼容旧版可加padding-top: constant(safe-area-inset-top) -
底部手势条区域：给 footer 或操作栏加
padding-bottom: env(safe-area-inset-bottom) -
左右挖孔（少见但存在）：如需全屏背景图不被裁切，可用
margin-left: env(safe-area-inset-left)等微调
注意：这些变量只在 viewport-fit=cover 生效时才可用，且在非全面屏设备上会退化为 0，无需额外判断。
3. H5 内嵌 App 场景需 JS 协同获取真实高度
当 H5 运行在 App 的 WebView 中时，系统状态栏高度可能与 Web 默认值不同（尤其 Android 各厂商差异大），此时仅靠 CSS 不可靠：
- App 原生层应提供接口，如
window.AppInterface.getStatusBarHeight() - H5 初始化时调用该接口，动态设置
document.body.style.paddingTop = statusBarHeight + 'px' - 若无原生支持，可 fallback 到 UA 判断 + 常见机型映射表（如 iPhone X/XS 是 44px，iPhone 12~15 是 50px，部分安卓为 24–32px）
避免直接写死 padding-top: 44px，否则在折叠屏、横屏或新机型上极易错位。
4. 沉浸式 ≠ 全屏，状态栏仍需视觉融合
即使内容顶到了最顶部，状态栏本身（时间、信号、电量）仍存在。要达成“沉浸感”，还需视觉配合：
- 顶部区域背景色建议用半透明白色/黑色（如
rgba(255,255,255,0.8)），让状态栏文字清晰可读 - 若顶部是图片或渐变，可叠加一层浅色蒙版，再设
position: relative的 header 容器，确保文字不被系统图标干扰 - 滚动后恢复纯色标题栏？用 JS 监听
scroll，根据scrollTop动态切换 body 类名，控制 padding 和背景透明度
不要依赖 body { background: linear-gradient(...) } —— 多数 WebView 不支持 body 渐变穿透状态栏，只能用绝对定位的伪元素或背景图模拟。
