uni-app动态获取屏幕边界到安全区域距离的完整教程
目录
一、什么是安全区域？
二、获取安全区域距离的核心方法
三、JavaScript动态获取安全区域距离
1. 核心API
2. 完整代码示例
3. 关键点说明
四、CSS环境变量适配安全区域
1. 使用 env() 和 constant()
3. 注意事项
五、不同平台的适配策略
1. H5 端
2. 小程序端
3. App端
六、总结
一、什么是安全区域？
安全区域是指屏幕边缘预留的非内容显示区域，用于避免UI元素被系统组件（如状态栏、底部导航栏）遮挡。在全面屏设备中，安全区域的顶部和底部距离尤为重要。例如：
- 顶部安全距离：状态栏高度（如iPhone的刘海区域）。
- 底部安全距离：设备底部的传感器区域或虚拟按键区域。
二、获取安全区域距离的核心方法
在uni-app中，可以通过以下两种方式动态获取安全区域距离：
- JavaScript API：使用
uni.getSystemInfoSync()获取系统信息。 - 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环境变量，可以高效适配全面屏设备。以下是关键步骤总结：
- JavaScript动态适配：使用
uni.getSystemInfoSync()获取safeAreaInsets。 - CSS环境变量：通过
env(safe-area-inset-xxx)设置内边距或外边距。 - 兼容性处理：针对不同平台（H5、小程序、App）选择合适的适配策略。