使用 css 适配 iphoneX 刘海屏

iphoneX 刘海屏幕导致 h5 页面不能正常的全屏显示了，就需要对
页面进行适配，下面就详细说说如何适配。

首先上一张适配之前的图：

可以看到页面顶部被遮挡，底部贴着最下面

ios11 增加新特性，增加webkit 的 css 函数，css 预定义变量
四个预定义变量为设定安全区域和边界的距离，如下:

safe-area-inset-left：安全区域距离左边边界距离
safe-area-inset-right：安全区域距离右边边界距离
safe-area-inset-top：安全区域距离顶部边界距离
safe-area-inset-bottom：安全区域距离底部边界距离

safe-area-inset-left 默认是 0
safe-area-inset-right 默认是 0
safe-area-inset-top 默认是 44px
safe-area-inset-bottom 默认是 34px

css 函数 env() 和 constant()
这两个函数都是 webkit 中 css 函数，可以直接使用变量函数，只有在 webkit 内核下才支持

env 函数
必须在 ios >= 11.2 才支持

constant 函数
必须 ios < 11.2 支持

在写的时候要做到兼容

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);

适配之后如图：

可以看到底部安全区域个人感觉是有点多了的，所以也可以不用 safe-area-inset-bottom 这个属性，通过媒体查询（利用iphoneX独特的型号参数）来给底部留下预留空间：

// iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3),
// iphone Xs Max
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3),
// iphone XR
only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2)
{
  .container {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    &.safe-bottom {
      padding-bottom: 13px;
    }
  }
}