iphone X/XR/11/12/13 手机引入了刘海屏和底部小黑条，此时需要对safari浏览器中运行的web 应用的顶部和底部做特殊适配才能正常使用。适配流程如下：
1、填充屏幕
首先使用meta viewport设置浏览器的visual viewport，使得视口被缩放来填充设备物理屏幕(效果如下图)。相关代码如下：
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalabe=no,viewport-fit=cover">
2、插入安全区域
IOS 11 中的Webkit包含了一个新的CSS函数env()和一组四个预定义的环境变量safe-env-inset-left/safe-env-inset-top/safe-env-inset-right/safe-env-inset-bottom。该函数和环境变量一起使用时可以允许向样式声明中引用在设备每侧插入的当前尺寸的安全区域。env()函数在IOS 11.2 beta之前名为constant()，其后改名为env()，env()向后兼容，浏览器无法识别该函数时会忽略该设置。相关代码如下：
#home-page-wrap {
width: 100%;
position: relative;
// 在 home-page-wrap 页面容器的内边距额外增加底部安全区域
padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
若想要指定最小或最大安全区域，而不是单纯的依赖上面四个预定义环境变量，可以借助CSS函数min(num1, num2)或max(num1, num2)。
如需要左侧内边距安全区域且安全区域的最小长度为12px，防止出现设备旋转时某侧的安全区域为0px导致布局丑陋的情况，可进行如下配置：
// 需要使用@supports 来检测浏览器对该函数的支持
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, env(safe-area-inset-left));
padding-right: max(12px, env(safe-area-inset-right));
}
}
3、为安全区域的添加背景色
可使用页面background-color以使插入的安全区域与页面的其余部分融为一体。
