uni.getSystemInfoSync() 是最稳的获取方式,它同步返回完整设备信息,包含 model(真实手机型号)、brand(厂商名)、platform(运行平台)和 windowHeight(可视区域高度),无需异步等待或额外调用其他 API。

uni.getSystemInfoSync() 是最稳的获取方式
绝大多数场景下,直接用 uni.getSystemInfoSync() 就够了——它同步返回完整设备信息,不涉及回调或 Promise,也不会因异步时机问题拿不到值。
常见错误现象:有人在 onLoad 里写 uni.getSystemInfo()(异步版)却没等 success 回调就直接用 res,结果拿到 undefined;还有人误以为要先调 uni.getDeviceInfo() 才能取型号,其实它只返回 platform("ios"/"android")和极简字段,不包含 model。
-
model字段才是真实手机型号(如"iPhone15,2"、"HUAWEI ANA-AN00"),brand是厂商名 -
platform只表示运行平台,不是设备型号;真机调试才可靠,模拟器常返回泛化值 - 不要在
data初始化时硬写默认高度,应设为0或null,等onMounted或onShow后再读取
windowHeight 就是你要的可视区域高度
windowHeight 是 uni-app 封装好的核心值:小程序 / App 端自动扣除状态栏 + 默认导航栏高度;H5 端返回浏览器视口高度(不含地址栏)。无需手动计算,直接用即可。
对比关键字段:
-
screenHeight:屏幕物理高度(含状态栏、导航栏、底部指示条) -
statusBarHeight:顶部状态栏/刘海高度(iOS 稳定,Android 多变) -
windowHeight:页面可渲染的可用高度(已剔除不可见区域) -
screenHeight - windowHeight差值若 > 60,大概率存在隐藏导航栏或底部安全区
safeAreaInsets 在各端支持差异极大
safeAreaInsets 不是所有平台都稳定提供,不能无条件依赖:
- iOS App:稳定返回
{ top, right, bottom, left } - 微信小程序:需基础库 ≥ 2.10.4,且必须在
onShow后调用才可靠 - 支付宝小程序:不支持该字段,只能硬编码 fallback(如
bottom: 34) - H5:完全不支持,需用 CSS
env(safe-area-inset-bottom)模拟,再用内联style覆盖降级
别只改 height,漏掉 padding-bottom 或 margin-bottom,按钮仍会被底部指示条遮挡。
安全区适配要分层 fallback,不能只信一个值
因为 safeAreaInsets 不是初始化就有的,尤其在小程序里,需要页面渲染完成、系统环境就绪后才可读取。混合 fallback 最稳妥:
- CSS 层:先写
padding-bottom: env(safe-area-inset-bottom) - JS 层:用
uni.getSystemInfoSync().safeAreaInsets?.bottom || 0获取 JS 值 - 模板层:绑定内联样式
:style="{ paddingBottom: safeBottom + 'px' }",覆盖 CSS - 兜底值:支付宝或旧版微信里
safeBottom为0时,建议设为34(常见虚拟按键高度)
最容易被忽略的是:不同机型底部安全距离可能动态变化(比如横屏、键盘弹出),safeAreaInsets 不会自动响应这些变化,需监听 resize 或重触发获取。


















