WKWebview iPhoneX 系列底部安全区适配问题
最近发现 iPhoneX 底部安全区适配有问题，之前我们的 UIWebView 已经适配过 iPhoneX 了，理论上不应该出现。
经排查，是近期切换 WKWebView 后导致。
笔者在解决问题时，发现部分 APP 也有这个问题，所以做个简单的整理。
问题介绍
在开发单屏页面时，使用 height: 100% 撑满整屏时，底部会出现一段空白（iPhoneX 底部小黑条部分），页面出现截断，现象如下：
iOS 客户端解决方案
经排查，问题是 WKWebView 的 WKContentView 不包括安全区导致，可以通过以下设置使 WKContentView 覆盖到安全区。具体可参考：Wkwebview适配iPhoneX踩坑记（http://guokelide.com/2018/03/13/%E7%AC%AC3%E7%AF%87-Wkwebview%E9%80%82%E9%85%8DiPhoneX%E8%B8%A9%E5%9D%91%E8%AE%B0/）
if () {_webView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;}
前端临时解决方案
iOS 解决方案需要在下一个版本发布，我们暂时采用了前端的临时方案来解决问题：将页面高度设置为 100% + 安全区高度，同时使用 overflow: hidden 禁止页面滑动。
安全区高度获取
为了帮助开发者适配底部安全区，iOS11 系统 Webkit 新增了一个 CSS 函数，用于设定安全区域与边界的距离，有四个预定义的变量：
safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离
这里我们只需关注 safe-area-inset-bottom 这个变量，因为它对应上面我们提到的小黑条的高度（竖屏时）。
在 iOS11.2 之后 constant() 函数被 env() 函数所替代。
问题解决
html,body{height: 100%; /* 兼容低版本安卓手机 */height: calc(100% + constant(safe-area-inset-bottom));height: calc(100% + env(safe-area-inset-bottom));overflow: hidden;}
注意：env() 跟 constant() 需要同时存在，而且顺序不能换。
至此，问题得到解决。最终效果图为：
参考资料
Wkwebview适配iPhoneX踩坑记
网页适配 iPhoneX，就是这么简单
http://guokelide.com/2018/03/13/%E7%AC%AC3%E7%AF%87-Wkwebview%E9%80%82%E9%85%8DiPhoneX%E8%B8%A9%E5%9D%91%E8%AE%B0/
https://aotu.io/notes/2017/11/27/iphonex/index.html