iphoneX适配
使用安全区域
iPhone X的Safari浏览器中页面显示都具有边缘。内容自动设置在显示的安全区域内，不会被圆角或设备的传感器外壳遮挡住（俗称iPhone X的刘海）。
如图：
使用整个屏幕
<meta name='viewport' viewport-fit='cover'>
viewport-fit 默认为auto，效果为上图。
使用整个屏幕的同时，需要应用内距
iOS 11中的WebKit包含了一个新的CSS函数constant()，以及一组四个预定义的常量：safe-area-inset-left, safe-area-inset-right, safe-area-inset-top和 safe-area-inset-bottom。当合并一起使用时，允许样式引用每个方面的安全区域的大小。不支持constant()的浏览器，会自动忽略。
.post {
padding: 12px;
padding-left: constant(safe-area-inset-left);
padding-right: constant(safe-area-inset-right);
}
但在竖屏时，左右的安全区域变成了0px。
因此需要min()或max().两个函数都采用任意数量的参数，并返回最小值或最大值。它们可以在calc()中使用，或者嵌套在一起，这两个函数都允许像calc()一样的数学计算
终极版css
@supports(padding: max(0px)) {
.post {
padding-left: max(12px, constant(safe-area-inset-left));
padding-right: max(12px, constant(safe-area-inset-right));
}
}
