uni.getSystemInfoSync 全量信息解析

moonjerx
2025-07-14 / 0 评论 / 3 阅读 / 正在检测是否收录...

📱 uni.getSystemInfoSync 全量信息解析(iPhone 12 + iOS 18.5 示例)

在开发基于 UniApp 的移动应用时,获取设备信息对于 UI 适配、安全区域计算、调试优化 至关重要。本文将基于一份真实的系统信息(以 iPhone 12 为例),完整解析 uni.getSystemInfoSync() 返回的数据结构,并提供适配建议。

注:所有敏感信息如设备ID、AppID 等均已脱敏或替换。

📦 基础信息

字段示例值含义
brand / deviceBrandapple设备品牌
model / deviceModeliPhone 12设备型号
platformios系统平台
system / osVersioniOS 18.5系统版本
language / osLanguagezh-Hans-HK当前系统语言(简体中文-香港)
deviceTypephone设备类型

📐 屏幕 & 像素信息

字段示例值含义
pixelRatio / devicePixelRatio3物理像素 / 逻辑像素比
screenWidth390 px屏幕宽度
screenHeight844 px屏幕高度
windowWidth390 px可视区域宽度
windowHeight844 px可视区域高度
statusBarHeight47 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.top47 px顶部安全区(通常是状态栏)
safeAreaInsets.bottom34 px底部安全区(通常是 Home Indicator 区域)
safeArea.height763 px内容区高度(去除安全边距)

🧱 App & UniApp 信息

字段示例值含义
appNameMyApp应用名称(已脱敏)
appId__UNI__xxxxxxx应用 ID(已脱敏)
appVersion14.75用户可见版本
appVersionCode1475内部版本号(用于版本比较)
appWgtVersion4.3.54资源版本(wgt 包)
uniPlatformapp当前平台
uniCompileVersion4.64编译时使用的 HBuilderX 版本
uniRuntimeVersion4.75App 运行时版本
browserNamewkwebviewiOS 内核类型
browserVersion18.5WebView 版本(与系统一致)
uaMozilla/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

评论 (0)

取消

您的IP: