最近发现 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 (@available(iOS 11.0, *)) {    _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踩坑记 

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/


• 网页适配 iPhoneX，就是这么简单

https://aotu.io/notes/2017/11/27/iphonex/index.html