uni-app状态栏与内容区重合解决技巧-uni-app-PHP中文网

uni-app h5端状态栏重合本质是未预留安全区域，需用env(safe-area-inset-top)配合viewport-fit=cover，禁用uni.setnavigationbarcolor（h5未实现），app端优先用var(--status-bar-height)。

uni-app状态栏与内容区重合解决技巧

uni-app 状态栏与内容区重合，本质不是“颜色没对齐”，而是布局没预留安全区域——iOS Safari 不让改状态栏，Android 厂商又各自为政，必须用 CSS 和条件逻辑兜底，不能依赖 JS 获取高度或调用无效 API。

这个函数压根没在 H5 平台实现，调用时控制台明确报 undefined is not a function。不是环境没配好，是 uni-app 明确不支持。很多项目还留着类似这样的判断：

if (process.env.VUE_APP_PLATFORM === 'h5') {
  uni.setNavigationBarColor({ backgroundColor: '#fff' })
}

这段代码只会白跑、占体积、还可能干扰后续逻辑。H5 端该删就删，别加条件编译“假装兜底”。

iPhone X 及之后机型的状态栏高度不固定（有刘海、挖孔、动态缩放），硬写 height: 20px 在横屏、缩放、深色模式下极易错位：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"> 必须存在，否则 env(safe-area-inset-top) 不生效
页面最外层容器加 padding-top: env(safe-area-inset-top)，不是给 body 加 margin-top，更不能用 position: fixed; top: 0 模拟导航栏
若用了自定义顶部栏，它的高度应为 calc(44px + env(safe-area-inset-top))，确保文字始终在安全区内
H5 下 uni.getSystemInfoSync().statusBarHeight 返回 0 或 undefined，不能用于计算

这个 CSS 变量由 uni-app 在 App 启动时注入，已适配各厂商刘海/挖孔/折叠屏，比 JS 获取稳得多：

pages.json 中对应页面必须设 "navigationStyle": "custom"，且建议同时配 "titleNView": false
根容器加 padding-top: var(--status-bar-height)，自定义导航栏背景设为 transparent
不要在 onLoad 里调 uni.getSystemInfoSync() 取高度——此时 DOM 未就绪，值常为 0；真要 JS 读，等 onReady 后用 getComputedStyle(document.documentElement).getPropertyValue('--status-bar-height')
HBuilderX 模拟器和云打包调试包不触发真实原生窗口 flags，测不出效果；必须装正式 IPA/APK 才能验证沉浸是否生效

华为、小米、OPPO 对状态栏高度的返回策略完全不同，且横竖屏切换、多窗口、刘海开启关闭都会导致值突变：

uni.getSystemInfoSync().statusBarHeight 只取一次，不会响应系统变化；onResize 在 Android 13+ 很多机型根本不触发
真要动态适配，得桥接到原生：比如用 plus.android.importClass('android.view.WindowInsets') 抓原始 insets，再通过 uni.$emit 向 Vue 层广播
多窗口模式下，statusBarHeight 仍返回竖屏值，实际应按当前窗口尺寸重算；此时建议降级为固定 25px 或 fallback 到 env(safe-area-inset-top)（部分 WebView 支持）
低端 Android（如部分安卓 8 设备）压根不支持 WindowInsets，只能靠 UA + 常见分辨率列表做粗略匹配