在不使用默认app的头部情况下，
顶部高度如图1
正常iphone的状态栏高度是20px（宽度为750下是40px(@2x) ）
iphonex的状态栏高度是44px （宽度为750下是88px(@2x) ）
底部高度如图2
正常iphone的状态栏高度是0
iphonex的状态栏高度是34px （宽度为750下是68px(@2x) ）
iphonex 示意图
适配办法之一
采用苹果官方推荐的css 函数env()、constant() 来适配
使用前提
当viewport-fit = contain时，env()是不起作用的，必须配合viewport-fit = cover使用。
env()和constant()
iOS11新增特性，Weblit的一个CSS函数，用于设定安全区域与边界的距离，由四个预定义的变量
safe-area-inset-left:安全区域距离左边边界距离
safe-area-inset-right:安全区域距离右边边界距离
safe-area-inset-top:安全区域距离顶部边界距离
safe-area-inset-bottom:安全区域距离底部边界距离
只需要关注 safe-area-inset-bottom这个变量，因为它对应的就是小黑条的高度。
使用meta标签，fixed元素的适配
padding-bottom:constant(safe-area-inset-bottom)
padding-bottom:env(safe-area-inset-bottom)
height:calc(50px(假设值)+env(safe-area-inset-bottom)) 改变高度来适配
margin-bottom:env(safe-area-inset-bottom)
css函数env()和constant()
- 可以直接使用变量函数，只有在webkit内核下才支持
- env()必须在 ios>=11.2才支持
- constant() 必须在ios<11.2才支持
- env()和constant()只有在viewport-fit = cover时才生效
