uniapp获取顶部安全区高度

### 获取 UniApp 中顶部安全区域的高度

在 UniApp 开发过程中，为了确保应用界面能够良好适应不同设备的屏幕特性（比如带有刘海屏的 iPhone），开发者可以通过 `uni.getSystemInfoSync()` 方法来获取当前设备的安全区域信息。具体来说，通过该方法返回的对象中的 `safeAreaInsets` 属性可以获得四个方向上的安全内边距值，其中包括顶部 (`top`) 的安全距离。

下面是一个简单的 JavaScript 代码片段用于展示如何取得顶部安全区高度：

// 使用同步接口获取系统信息
const systemInfo = uni.getSystemInfoSync();
// 解析得到的安全区域内边距对象
const { safeAreaInsets } = systemInfo;
console.log(`Top Safe Area Height is ${safeAreaInsets.top}px`);

此段代码会打印出顶部安全区域的具体数值，单位为像素(px)[^5]。对于希望动态调整页面布局以响应不同的设备特性的场景非常有用。

此外，在 CSS 方面也可以利用环境变量 `env(safe-area-inset-top)` 来自动处理这一问题，无需手动计算具体的尺寸值。这使得样式定义更加灵活且易于维护[^1]。

例如，在全局 CSS 文件中加入如下规则即可实现对顶部安全区域的支持：

.safe-area-inset-top {
    padding-top: env(safe-area-inset-top);
}

上述方式适用于大多数情况下的顶部安全区域适配需求。而对于特定平台如 iOS 应用，则还可以考虑采用 manifest 配置的方式进一步优化用户体验[^4]。