首页 h5开发 正文内容

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

2023年08月17日 , , 618

这是网页适配苹果刘海屏手机的最佳方法了,mark 一下。

问题描述

我们在开发 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 页面,也可以用这种方法兼容。