一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第6天
最近发现公司的小程序代码中有一些很陌生的代码safe-area-inset-bottom，本以为是什么高级用法，查阅资料才发现是我孤陋寡闻了，原来是css新增的属性，目的是解决安全区域被覆盖的问题。
安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角(corners)、齐刘海(sensor housing)、小黑条(Home Indicator)的影响。
先来说一下用法及作用：
IOS全面屏底部有小黑线，位于底部的元素会被黑线阻挡，可以使用以下样式：
.model{
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
}
获取高度时，可用：
.model{
height: calc(100% - constant(safe-area-inset-bottom));
height: calc(100% - env(safe-area-inset-bottom));
}
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: 安全区域距离底部边界的距离
需要的注意一点：H5网页设置 viewport-fit=cover的时候才会生效，小程序里的viewport-fit默认是 cover。
IOS 适配
为了更好的理解上文意思，我们来看一下未适配的底部效果：
适配底部的代码如下:
height: calc(96rpx + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
height: calc(96rpx + env(safe-area-inset-bottom)); /* 兼容 iOS > 11.2 */
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
适配后的效果：
H5适配
关于H5页面的安全区域适配，采用viewport+env+constant方案：
viewport-fit 默认有3个值：
- contain：可视窗口完全包含网页内容（左图）
- cover：网页内容完全覆盖可视窗口（右图）
- auto：默认值，此值不影响初始布局视图端口，并且整个web页面都是可查看的。
我们需要将viewport设置为cover，env和constant才能生效。设置代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
适配的代码如下：
/* 可以通过增加padding-bottom来适配 */
padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
/* 可以通过margin-bottom来适配 */
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
/* 或者改变高度*/
height: calc(55px + constant(safe-area-inset-bottom));
height: calc(55px + env(safe-area-inset-bottom));
到此大功告成！
