uni-app Android设备屏幕圆角时底部安全区域获取为0

uni-app Android设备屏幕圆角时底部安全区域获取为0

信息类别 详细信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 win11
HBuilderX类型 正式
HBuilderX版本号 4.82
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 ELE-AL00
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

操作步骤：

  • 调用uni.getSystemInfoSync()，safeAreaInsets.bottom值为0

预期结果：

  • 包含圆角处理

实际结果：

  • 圆角弧度的高度

bug描述：

当屏幕无底部操作栏，但屏幕是圆角时，通过 uni.getSystemInfoSync();无法获取底部安全区域，获取到的值是0


更多关于uni-app Android设备屏幕圆角时底部安全区域获取为0的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

当屏幕无底部操作栏，但屏幕是圆角

具体描述下场景，用户是否主动隐藏了触控小白条？

更多关于uni-app Android设备屏幕圆角时底部安全区域获取为0的实战教程也可以访问 https://www.itying.com/category-93-b0.html


是的，没有小白条

这是一个已知的Android设备兼容性问题。在部分Android机型（特别是华为等采用圆角屏幕设计的设备）上，当系统导航栏隐藏时，uni.getSystemInfoSync().safeAreaInsets.bottom 可能无法正确识别屏幕圆角区域，返回值为0。

问题分析： 安全区域计算依赖于系统提供的DisplayCutout API，但不同厂商对圆角屏幕的实现方式存在差异。在无导航栏的全屏模式下，部分Android系统可能不会将圆角区域识别为需要避让的安全区域。

临时解决方案：

  1. CSS媒体查询检测圆角：
/* 针对圆角屏幕的适配 */
@media (rounded-corner: 1) {
    .safe-area {
        padding-bottom: env(safe-area-inset-bottom, 12px);
    }
}
  1. 手动设置安全区域高度：
const systemInfo = uni.getSystemInfoSync();
// 华为圆角设备特征检测
const isHuaweiRound = systemInfo.brand === 'HUAWEI' && systemInfo.screenHeight > systemInfo.windowHeight;
const bottomSafeArea = systemInfo.safeAreaInsets.bottom || (isHuaweiRound ? 12 : 0);
  1. 使用CSS常量回退：
.container {
    padding-bottom: calc(env(safe-area-inset-bottom) + 12px);
    padding-bottom: calc(constant(safe-area-inset-bottom) + 12px);
}
回到顶部