📱 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 适配
页面布局计算
自定义导航栏和底部栏
浮动调试工具实现

uni.getSystemInfoSync 全量信息解析