在苹果 iPhoneX 、iPhone XR等设备上，可以看到物理Home键被取消，改为底部小黑条替代home键功能。
h5 网页需要针对这种情况进行适配，否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情况。
具体方案如下：
使用苹果官方推出适配方案css函数env()、constant()来适配
env()和constant()，是IOS11新增特性，Webkit 的css函数，用于设定安全区域与边界的距离，有4个预定义变量：
safe-area-inset-left：安全区域距离左边边界的距离
safe-area-inset-right：安全区域距离右边边界的距离
safe-area-inset-top：安全区域距离顶部边界的距离
safe-area-inset-bottom ：安全距离底部边界的距离
因为目标是需要对底部小黑条做适配，所以只需要关注safe-area-inset-bottom这个值。
而env()和constant()函数有个必要的使用前提，当网页设置viewport-fit=cover的时候才生效，根据微信小程序的表现和我在实际真机测试时这两个函数生效，推测小程序里的viewport-fit默认是cover。
有一点要注意，在IOS11.2系统以前，可以使用constant()函数，但是在IOS11.2系统以后，这个函数就被废弃了，被env()函数替代了。
具体操作如下：
1.在index.html中设置如下代码（将viewport设置为cover，env和constant才能生效）：
<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">
2.设置公共样式（同时设置env和constant代码，同样env()和constant()需要同时存在，而且顺序不能换）：
/* 可以通过增加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));
3.也可以在底部添加一个空白的div颜色块来做适配。
还有一种是使用 @supports 隔离兼容样式
可以使用 @supports 来隔离兼容样式，当浏览器支持bottom: constant(safe-area-inset-bottom)
或者bottom: env(safe-area-inset-bottom)的时候，bottom-button类就会新增margin-bottom的样式
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
.bottom-button {
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
}
}————————————————
