目录
一、什么是安全区域？
安全区域是指屏幕边缘预留的非内容显示区域，用于避免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）选择合适的适配策略。