小程序IOS安全区域优化：safe-area-inset-bottom

ios下边有一个小黑线，位于底部的元素会被黑线阻挡
safe-area-inset-bottom
一 用法及作用：

IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式：

1. .model{
2.         padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
3.         padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
4. }

复制代码

获取高度时，可用

1. .model{
2.         height: calc(100% -  constant(safe-area-inset-bottom));
3.         height: calc(100% -  env(safe-area-inset-bottom));
4. }

复制代码

  tips:先使用constant 再使用 env
  知识点扫盲
下面把干系知识点整理如下：
env() 与 constant() 设置安全区域，是css里IOS11新增的属性，webkit的css函数，用于设定安全区域与界限的间隔，有4个预定义变量：
safe-area-inset-left: 安全区域间隔左界限的间隔
safe-area-inset-right: 安全区域间隔右界限的间隔
safe-area-inset-top: 安全区域间隔顶部界限的间隔
safe-area-inset-bottom: 安全区域间隔底部界限的间隔
为了更好的理解上文意思，我们来看一下未适配的底部效果：

 

适配后的效果：

 

二