使用 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-to