ios底部安全距离

背景：

       目前公司开发商城小程序，对于iOS要设置底部安全距离，否则底部会被黑条遮挡

技术方案：

1、苹果官方推荐：使用env()，constant()来适配，env()和constant()，是IOS11新增特性，Webkit的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
       safe-area-inset-left：安全区域距离左边边界的距离
       safe-area-inset-right：安全区域距离右边边界的距离
       safe-area-inset-top：安全区域距离顶部边界的距离
       safe-area-inset-bottom ：安全距离底部边界的距离

针对于env()和constant()函数有两个必要的使用前提：

（1）网页需设置viewport-fit=cover

（2）小程序viewport-fit默认是cover

fix：

在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。官方原话如下：

The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.

继而在做屏幕适配时，需同时适配：

padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/

注意：env()和constant()需要同时存在，且顺序不能调换

2、如果不处理ios底部安全距离兼容问题，则会类似如下图所示那样：

（1）

（2）

fix：

     在处理iOS兼容的同时，要注意安卓正常的显示，所以如果原本的需求有距离底部边距的需求，出了要做ios的适配，还要正常写边距值，这样ios和安卓才能正常适配

.no-data
  padding-bottom env(safe-area-inset-bottom)  // 适配ios
  padding 40rpx 0 60rpx  // 需求对底部要求有边距，ios和安卓显示正常

类似效果：