uni.getSystemInfoSync()是唯一靠谱的入口,返回statusBarHeight、windowHeight、screenHeight及可能存在的safeAreaInsets;H5和支付宝小程序无safeAreaInsets,微信小程序需基础库≥2.10.4且onShow后调用才可靠。

直接用 uni.getSystemInfoSync() 拿,别用异步版,也别指望所有平台都返回 safeAreaInsets —— 它在 H5 和支付宝小程序里压根不存在,微信小程序还得基础库 ≥ 2.10.4 且必须在 onShow 后调用才可靠。
uni.getSystemInfoSync() 是唯一靠谱的入口
这是同步 API,返回对象里带 statusBarHeight(顶部安全距离)、windowHeight(可用高度)、screenHeight(物理屏高),以及可能存在的 safeAreaInsets。它不依赖回调、不因生命周期时机错失数据,真机调试时最稳。
- 别在
data初始化里硬写默认值,比如safeBottom: 34,会覆盖真实值 - 别在
onLoad里用异步的uni.getSystemInfo()却没等success就直接读res.safeAreaInsets,结果是undefined -
model字段才是真实机型(如"iPhone15,2"),platform只是"ios"或"android",不能当型号用
safeAreaInsets.bottom 不是所有平台都返回
这个字段不是“有或没有”的问题,而是“有没有、什么时候有、靠不靠谱”的问题:
- iOS App:稳定返回,
bottom值通常为 34(iPhone X 系列)或 0(非全面屏) - 微信小程序:基础库 undefined;即使达标,也要在
onShow后调用,onLoad里大概率为空 - H5:永远为
undefined,浏览器无此概念,得靠 CSSenv(safe-area-inset-bottom)+ 内联 style fallback - 支付宝小程序:不支持该字段,只能硬编码 fallback,比如设成
34或0,再配合 UA 判断微调
底部按钮适配不能只靠 JS 计算
拿到 safeAreaInsets.bottom 后,光改 height 或 bottom 值没用,按钮照样被遮挡。关键是要把安全距离转成 padding-bottom 或 margin-bottom,作用在容器上。
- 推荐写法:
style="{ paddingBottom: safeBottom + 'px' }",绑定到固定底部的外层view - CSS 降级方案:
padding-bottom: env(safe-area-inset-bottom); padding-bottom: calc(24rpx + var(--safe-bottom, 0px)); - 别漏掉
z-index和position: fixed的组合,否则在部分安卓 WebView 里仍会错位 - 测试时务必真机运行,模拟器返回的
safeAreaInsets常是泛化值(如全为 0)
最易忽略的一点:不同平台对 safeAreaInsets 的定义不一致——iOS 返回的是从屏幕边缘到安全区的距离,而某些安卓厂商的系统可能返回的是“可渲染区域高度”,实际使用前最好加一层校验,比如 Math.max(0, systemInfo.safeAreaInsets?.bottom || 0)。


















