h5适配IOS底部小黑条
最近本菜鸡在处理移动端项目时，在IOS高版本中遇到了底部小黑条盖住了h5底部按钮组的样式问题。
解决方案
由于iphone特有的安全区域，所以有时候会造成底部操作栏顶出安全区范围，造成了底部小黑条盖住了h5底部按钮组的样式问题。解决方案也没那么繁杂，就是在容器内去用样式把这块区域的样式给隔离掉（实际上所有的内容还是在安全区内），那么视觉上就会形成按钮组在小黑条的上方。
padding-bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */
padding-bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */
/* 该拓展样式需保持上面的先后顺序 */
当然与html适配也有一定的关联，为了兼容性，苹果拓展了meta标签，使用了viewport-fit=cover，用于设置网页在可视窗口的布局方式。
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
由于项目是基于企微做的第三方应用，所以遵循着h5的规范。企微版中整体页面是基于position: fixed的布局方式，所以需要设置padding去撑满整个container容器。
.container {
background-color: #f4f4f4;
min-height: 100vh;
height: 100%;
&.full {
padding-bottom: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
.main {
height: 100%;
overflow: auto;
}
}
