1.问题描述
iphone11(ios 15.2) 微信/企微 h5 页面底部小黑条遮盖内容。如下图中，表单提交按钮与小白条重叠。
2.解决方案
通过在底部 padding 中添加 safe-area-inset-bottom 安全区域值解决。需要注意的是要先开启 viewport-fit=cover 属性才能生效。例如：
.footer {
padding-bottom: calc(15px + constant(safe-area-inset-bottom));
padding-bottom: calc(15px + env(safe-area-inset-bottom));
}
其中：constant(safe-area-inset-bottom) 是为了兼容 iOS 11.2 beta 以前的版本，constant 需要写在前面。
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. webkit博客链接
结果如下：
3.扩展
我们现在只处理了底部的安全区域，当页面支持旋转屏幕时，此时底部的小白条已经移动到手机侧边了，此时我们需要做相应的适配。
footer {
padding-bottom: calc(15px + constant(safe-area-inset-bottom));
padding-bottom: calc(15px + env(safe-area-inset-bottom));
padding-right: calc(15px + constant(safe-area-inset-bottom));
padding-right: calc(15px + env(safe-area-inset-bottom));
padding-left: calc(15px + constant(safe-area-inset-bottom));
padding-left: calc(15px + env(safe-area-inset-bottom));
}
使用 padding-bottom: constant(safe-area-inset-bottom) 底部留白区域已经足够大了，不需要通过 calc 再加上一个默认值。此时我想通过 max() 来解决这个问题，只取默认值和安全区域的最大值，但发现实际效果与想法并不一致。
padding-bottom: max(1px, env(safe-area-inset-bottom));
实际情况发现以上这种写法 max 的取值始终为 1px，以下几种方式皆表现正常。
padding-bottom: max(1px, 10px);
padding-bottom: env(safe-area-inset-bottom);
目前还没有找到原因，小小的脑瓜大大的疑问？？？
