h5嵌入app样式兼容

1.html层面
首先得在页面的 meta 中添加一个新的值：viewport-fit=cover,视图端口被缩放以填充设备显示。

2.css层面
适配 iPhoneX 及以后的刘海屏手机
因为 safe-area-inset-top 避开了状态栏，而底部因为 safe-area-inset-bottom 避开了小黑条，完美的显示在了 Safe Area 的区域中。

body {
padding:
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left); /* 兼容 iOS < 11.2 /
padding:
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left); / 兼容 iOS >= 11.2 */
}

处理 Fixed 和 绝对定位的情况，对该元素单独增加内边距的 padding 来解决。
@element-height: 60px; /* 元素原始高度 */
.element {
height: calc(@element-height + constant(safe-area-inset-bottom));
height: calc(@element-height + env(safe-area-inset-bottom));
}

3.可以通过 less、sass 的函数，通过媒体查询来准确的定位到刘海屏的手机，然后写