一、背景

公司使用uniapp开发安卓和iOS的APP，在安卓手机上面运行没有问题，但是在iOS手机上运行，底部那个黑色的小横条遮挡在元素上面，导致界面展示出现问题。

如下图：

image.png

二、解决方案

之前的代码

.bottomBtnBox{
    padding: 20rpx;
}

修改后的代码

.bottomBtnBox{
    padding: 20rpx 20rpx constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
    padding: 20rpx 20rpx env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}

注意：
1、先使用constant 再使用 env
2、一般来说，使用constant(safe-area-inset-bottom)和env(safe-area-inset-bottom)已经足够，无需再加上之前的距离，如果要加的话，可以使用calc()，即calc(20rpx + constant(safe-area-inset-bottom))和calc(20rpx + env(safe-area-inset-bottom))

三、相关知识点

env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，它有4个预定义变量：

• safe-area-inset-left：安全区域距离左边边界的距离
• safe-area-inset-right：安全区域距离右边边界的距离
• safe-area-inset-top：安全区域距离顶部边界的距离
• safe-area-inset-bottom ：安全距离底部边界的距离

注意：
env()和constant()函数有个必要的使用前提，H5网页设置viewport-fit=cover的时候才生效，小程序里的viewport-fit默认是cover。