uni-app动态获取屏幕边界到安全区域距离的完整教程

目录

一、什么是安全区域？

二、获取安全区域距离的核心方法

三、JavaScript动态获取安全区域距离

1. 核心API

2. 完整代码示例

3. 关键点说明

四、CSS环境变量适配安全区域

1. 使用 env() 和 constant()

3. 注意事项

五、不同平台的适配策略

1. H5 端

2. 小程序端

3. App端

六、总结

---

一、什么是安全区域？

安全区域是指屏幕边缘预留的非内容显示区域，用于避免UI元素被系统组件（如状态栏、底部导航栏）遮挡。在全面屏设备中，安全区域的顶部和底部距离尤为重要。例如：

• 顶部安全距离：状态栏高度（如iPhone的刘海区域）。
• 底部安全距离：设备底部的传感器区域或虚拟按键区域。

二、获取安全区域距离的核心方法

在uni-app中，可以通过以下两种方式动态获取安全区域距离：

1. JavaScript API：使用 uni.getSystemInfoSync() 获取系统信息。
2. CSS环境变量：通过 env(safe-area-inset-xxx) 和 constant(safe-area-inset-xxx) 实现样式适配。

 

三、JavaScript动态获取安全区域距离

1. 核心API

const systemInfo = uni.getSystemInfoSync();
const { safeAreaInsets } = systemInfo;
console.log("顶部安全距离:", safeAreaInsets.top);
console.log("底部安全距离:", safeAreaInsets.bottom);

2. 完整代码示例

<template><view class="container" :style="{ paddingBottom: bottomPadding + 'px' }"><!-- 页面内容 --><view class="content">动态适配安全区域</view></view>
</template><script>
export default {data() {return {bottomPadding: 0, // 底部安全距离};},onReady() {this.getSafeAreaInsets();},methods: {getSafeAreaInsets() {try {const systemInfo = uni.getSystemInfoSync();const { safeAreaInsets } = systemInfo;// 设置底部安全距离this.bottomPadding = safeAreaInsets.bottom;// 可选：设置顶部安全距离const topPadding = safeAreaInsets.top;console.log("顶部安全距离:", topPadding);} catch (err) {console.error("获取安全区域失败:", err);}},},
};
</script><style>
.container {background-color: #f0f0f0;position: relative;
}.content {padding: 20px;
}
</style>

3. 关键点说明

• uni.getSystemInfoSync()：同步获取系统信息，包含 safeAreaInsets（安全区域距离）。
• safeAreaInsets：对象包含 top、left、right、bottom 四个属性，分别表示安全区域到屏幕边缘的距离。
• 兼容性：此方法适用于所有平台（H5、小程序、App），但部分安卓设备可能需要额外测试。

 

四、CSS环境变量适配安全区域

1. 使用 env() 和 constant()

在CSS中，可以通过环境变量直接设置安全区域的内边距或外边距：

/* 底部安全区域适配 */
.container {padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */padding-bottom: env(safe-area-inset-bottom);      /* 兼容 iOS >= 11.2 */
}/* 顶部安全区域适配 */
.header {padding-top: env(safe-area-inset-top);
}

 2. 完整代码示例

<template><view class="container"><view class="header">顶部导航栏</view><view class="content">页面内容</view><view class="footer">底部导航栏</view></view>
</template><style>
.container {background-color: #ffffff;height: 100vh;display: flex;flex-direction: column;
}.header {padding-top: env(safe-area-inset-top); /* 适配顶部安全区域 */background-color: #f8f8f8;height: 60px;text-align: center;line-height: 60px;
}.content {flex: 1;background-color: #e0e0e0;
}.footer {padding-bottom: env(safe-area-inset-bottom); /* 适配底部安全区域 */height: 60px;background-color: #f0f0f0;text-align: center;line-height: 60px;
}
</style>

3. 注意事项

• 顺序要求：constant() 和 env() 必须同时存在，且 constant() 在前。
• 兼容性：env() 仅支持 iOS 11.2+ 和部分安卓机型，需结合JavaScript动态适配。

 

五、不同平台的适配策略

1. H5 端

• 推荐方法：优先使用 uni.getSystemInfoSync() 动态计算安全区域距离。
• CSS限制：部分浏览器不支持 env()，需通过JavaScript动态设置样式。

2. 小程序端

• 安全区域API：uni.getSystemInfoSync() 支持所有平台。
• CSS适配：env() 在微信小程序中可能不可用，建议通过JavaScript动态设置。

3. App端

• 原生配置：在 manifest.json 中配置安全区域（仅限App端）：

{"plus": {"distribute": {"android": {"webview": {"overflow": "hidden"}}}}
}

 

六、总结

通过结合JavaScript动态获取安全区域距离和CSS环境变量，可以高效适配全面屏设备。以下是关键步骤总结：

1. JavaScript动态适配：使用 uni.getSystemInfoSync() 获取 safeAreaInsets。
2. CSS环境变量：通过 env(safe-area-inset-xxx) 设置内边距或外边距。
3. 兼容性处理：针对不同平台（H5、小程序、App）选择合适的适配策略。