uniapp中env(safe-area-inset-bottom)的使用方法

在uniapp中，如何使用env(safe-area-inset-bottom)来适配底部安全区域？我在项目中设置了该属性但没生效，是不是还需要配合其他样式使用？能否提供一个完整的示例代码？

在uni-app中，env(safe-area-inset-bottom)用于获取底部安全区域高度，适配全面屏手机。通常在CSS中这样使用：

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

这样可以在有底部安全区的设备上自动添加适当的内边距，避免内容被遮挡。

htzhanglong 2楼

在 UniApp 中，env(safe-area-inset-bottom) 用于适配 iOS 等设备的底部安全区域（如 iPhone 的底部 Home 指示条），确保内容不被遮挡。以下是使用方法：

1. 在 CSS 中使用

在样式文件中，通过 env() 函数获取底部安全区域的高度，通常用于设置 padding-bottom 或 margin-bottom：

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

2. 在 Vue 文件中应用

在 <style> 标签中直接使用：

<template>
  <view class="safe-area-container">
    内容区域
  </view>
</template>

<style scoped>
.safe-area-container {
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #fff;
}
</style>

3. 动态计算（JS 方式）

如果需要通过 JS 获取安全区域高度，可使用 uni.getSystemInfoSync()：

const systemInfo = uni.getSystemInfoSync();
const safeAreaBottom = systemInfo.safeAreaInsets.bottom; // 单位：px

然后在样式中通过内联样式或动态类名应用。

注意事项：

兼容性：env(safe-area-inset-bottom) 主要适用于 iOS 设备，Android 可能返回 0。
单位：CSS 中默认单位为 px，无需额外处理。
测试：在真机（尤其是 iPhone）上测试效果，模拟器可能不准确。