📱 uni.getSystemInfoSync 全量信息解析(iPhone 12 + iOS 18.5 示例)
在开发基于 UniApp 的移动应用时,获取设备信息对于 UI 适配、安全区域计算、调试优化 至关重要。本文将基于一份真实的系统信息(以 iPhone 12 为例),完整解析 uni.getSystemInfoSync()
返回的数据结构,并提供适配建议。
注:所有敏感信息如设备ID、AppID 等均已脱敏或替换。
📦 基础信息
字段 | 示例值 | 含义 |
---|---|---|
brand / deviceBrand | apple | 设备品牌 |
model / deviceModel | iPhone 12 | 设备型号 |
platform | ios | 系统平台 |
system / osVersion | iOS 18.5 | 系统版本 |
language / osLanguage | zh-Hans-HK | 当前系统语言(简体中文-香港) |
deviceType | phone | 设备类型 |
📐 屏幕 & 像素信息
字段 | 示例值 | 含义 |
---|---|---|
pixelRatio / devicePixelRatio | 3 | 物理像素 / 逻辑像素比 |
screenWidth | 390 px | 屏幕宽度 |
screenHeight | 844 px | 屏幕高度 |
windowWidth | 390 px | 可视区域宽度 |
windowHeight | 844 px | 可视区域高度 |
statusBarHeight | 47 px | 状态栏高度(刘海高度) |
🔒 安全区域信息
安全区域对于适配刘海屏和底部 Home Indicator 非常重要。
"safeArea": {
"top": 47,
"bottom": 810,
"left": 0,
"right": 390,
"width": 390,
"height": 763
},
"safeAreaInsets": {
"top": 47,
"bottom": 34,
"left": 0,
"right": 0
}
字段 | 示例值 | 含义 |
---|---|---|
safeAreaInsets.top | 47 px | 顶部安全区(通常是状态栏) |
safeAreaInsets.bottom | 34 px | 底部安全区(通常是 Home Indicator 区域) |
safeArea.height | 763 px | 内容区高度(去除安全边距) |
🧱 App & UniApp 信息
字段 | 示例值 | 含义 |
---|---|---|
appName | MyApp | 应用名称(已脱敏) |
appId | __UNI__xxxxxxx | 应用 ID(已脱敏) |
appVersion | 14.75 | 用户可见版本 |
appVersionCode | 1475 | 内部版本号(用于版本比较) |
appWgtVersion | 4.3.54 | 资源版本(wgt 包) |
uniPlatform | app | 当前平台 |
uniCompileVersion | 4.64 | 编译时使用的 HBuilderX 版本 |
uniRuntimeVersion | 4.75 | App 运行时版本 |
browserName | wkwebview | iOS 内核类型 |
browserVersion | 18.5 | WebView 版本(与系统一致) |
ua | Mozilla/5.0...uni-app | 浏览器 UserAgent(已截断) |
🧪 实际使用建议
✅ 状态栏高度使用:
padding-top: var(--status-bar-height); // 适配刘海屏
✅ Bottom 安全区适配:
padding-bottom: env(safe-area-inset-bottom); // 适配 Home Indicator
✅ JS 动态计算 padding:
const system = uni.getSystemInfoSync();
const paddingTop = system.statusBarHeight + 44; // 状态栏 + 自定义导航栏
const paddingBottom = system.safeAreaInsets.bottom + 55; // Home Indicator + 底部 tab
🎯 调试辅助(推荐实践)
在开发过程中你可以引入一个 浮动调试按钮,点击后显示当前系统信息及安全区计算值,便于测试不同设备的实际效果。
例如:minHeight: 100vh
paddingTop: calc(var(--status-bar-height) + 44px)
paddingBottom: calc(env(safe-area-inset-bottom) + 55px)
🧾 总结
本文详细解析了 uni.getSystemInfoSync()
的所有关键字段及含义,尤其针对 iPhone 12 的刘海屏、安全区域、底部指示器做了说明。
了解这些参数,可以帮助我们开发时更好地进行:
- UI 适配
- 页面布局计算
- 自定义导航栏和底部栏
- 浮动调试工具实现
评论 (0)