一、背景
公司使用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。
