折叠屏状态栏高度不能只靠uni.getSystemInfoSync().statusBarHeight,因其仅在启动时静态获取默认值,无法响应折叠/展开导致的动态变化;应改用plus.navigator.getStatusBarHeight()实时获取,并结合resize事件、窗口尺寸判断形态,配合env(safe-area-inset-top)与动态CSS逻辑适配。

折叠屏状态栏高度为什么不能只靠 uni.getSystemInfoSync().statusBarHeight
因为折叠屏(如三星 Z Fold 系列、华为 Mate X 系列)在不同形态下,状态栏物理高度会动态变化:外屏可能是 48px,内屏展开后可能缩到 28px,合起时又跳回 62px。而 uni.getSystemInfoSync() 在 App 启动时只取一次值,且返回的是系统“默认兜底值”,不感知折叠/展开动作。实测中,Z Fold5 展开态下该 API 仍返回 48,但实际安全区顶部距离只有 28px,导致内容被误顶高 20px。
如何在运行时检测折叠态并读取真实状态栏高度
必须绕过 JS API 的静态缺陷,改用原生能力探测:
- App 端优先调
plus.navigator.getStatusBarHeight()—— 它在折叠屏上会随窗口重绘实时更新,比uni.getSystemInfoSync()可靠得多 - 监听窗口尺寸变化:
window.addEventListener('resize', handleResize),结合window.innerWidth与window.innerHeight判断是否处于折叠/展开态(例如内屏展开后window.innerWidth > 720且window.innerHeight > 1400) - 避免在
onLoad或mounted中一次性取值;应在onShow+$nextTick后再查,确保 plus 环境就绪、窗口已稳定
折叠屏 CSS 占位不能只靠 --status-bar-height
uni-app 注入的 --status-bar-height 在折叠屏上仍为固定值(通常取外屏高度),无法响应内屏展开。必须叠加环境变量:
- H5 / 支持 env() 的 Android 10+ 和 iOS 11+:用
padding-top: calc(env(safe-area-inset-top) + var(--status-bar-height)); - App 端可封装一个计算函数,根据当前屏幕宽高比动态选值:
const realHeight = isFolded ? '28px' : isUnfolded ? '62px' : '48px'; - 别把
--status-bar-height当唯一依据——它只是基础兜底,折叠场景下必须被运行时逻辑覆盖
折叠屏下拉刷新时状态栏变黑/闪烁的根本原因
不是样式没写对,是 webview 渲染层在折叠态切换过程中,未同步更新安全区边界,导致下拉时内容强行顶入错误的顶部区域。尤其在 Z Fold5 外屏→内屏热切时高频复现。
- 临时禁用透明导航栏:绑定
:class="{ 'nav-no-transparent': isPulling || isFolded }",并在onPullDownRefresh和onResize中同步控制isPulling/isFolded - 真机调试务必用正式打包的 APK/IPA —— HBuilderX 模拟器完全不模拟折叠逻辑,
--status-bar-height始终为常量 - 若页面含输入框,折叠态软键盘弹出易引发布局错乱,建议该类页面直接关闭
navigationStyle: "custom",退回原生导航栏保底


















