uni-app 开发 H5，底部菜单在 iOS 端被遮住的解决办法

问题描述

我们在开发 H5 时，用苹果 X 等全面屏手机访问时，由于手机底部有一条横线，底部的导航菜单会被遮挡，体验很差。如果写死一个 padding 数值，在常规的手机访问又多余了，这个问题怎么解决呢？

原因分析

出现这个问题的原因是苹果的全面屏手机底部默认会有一条横线，iPhone X 后面发布的 iPhone 11 – iPhone 14 都有这个问题，这个区域在 iOS 移动开发中一般叫做安全区域。解决这个问题其实很简单，CSS 有个常量专门用来适配这样的屏幕，亲测 H5 网页没问题，所以 uni-app 开发的网页也同样适用。

解决办法

使用 CSS 常量 constant(safe-area-inset-bottom)、env(safe-area-inset-bottom) 来适配，比如只需要在底部导航栏样式中加上即可：

<style>  
.tabbar-wrap {  
  ...
  padding-bottom: 0;  
  padding-bottom: constant(safe-area-inset-bottom);  
  padding-bottom: env(safe-area-inset-bottom);  
}  
</style>

上面代码的效果是：

• 在非苹果浏览屏手机， padding-bottom 为 0；
• 在苹果刘海屏手机，会自动计算底部占用的空间，然后 padding-bottom 实际换算为这个空间的高度。

这样就既简单又完美解决了 H5 应用里底部导航栏被遮挡的问题。这是开发 H5 的解决办法，如果你用 uni-pp 开发 APP，使用的是 vue 页面，也可以用这种方法兼容。