前端页面兼容水滴屏、流海屏

一. viewport-fit解决iphoneX的“刘海”问题

1. 设置mate标签viewport为cover

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">

viewport-fit参数

• contain： 可视窗口完全包含网页内容
• cover：页面充满整个屏幕
• auto: 默认值， 页面内容显示在safe 安全区域内。

2. 设置css样式

.fix-lhp-top {
    box-sizing: content-box;
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

• 1. safe-area-inset-top 为导航栏+状态栏的高度 88px
• 2. safe-area-inset-left 竖屏时为0
• 3. safe-area-inset-right 竖屏时为0
• 4. safe-area-inset-bottom 底下圆弧的高度

在iOS 11中的WebKit包含了一个新的CSS函数constant()（在iOS11.2后更新为env()），当合并一起使用时，允许样式引用每个方面的安全区域的大小。当我们设置viewport-fit:cover时，使用上面css样式即可生效。

注意：env() 跟 constant() 需要同时存在，而且顺序不能换。

二、媒体查询

@media screen and (device-width:375px) and (device-height:812px){
    .header { padding-top: 36px; }
}
@media (device-height:667px) and (-webkit-min-device-pixel-ratio:2) {
    .header { padding-top: 36px; }
}

三、@supports 隔离兼容模式

@supports (bottom: env(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
    .header { padding-top: 36px; }
}