通过viewport-fit=cover解决H5页面在IOS下安全区域的问题

当我们开发移动端网页时，在苹果X、苹果11、苹果12等机型会遇到顶部以及底部页面内容被遮挡的问题，需要我们留出来一定的安全距离。

接下来让我们看下如何借助viewport-fit来实现安全距离

1、我们要确保html中存在name为viewport的mata标签并且content存在viewport-fit=cover

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

meta-viewport 标签是苹果公司在 2007 年引进的，用于移动端布局视口的控制。下列是viewport相关选项

• width 布局视口的宽度
• initial-scale 【系统】初始缩放比例
• maximum-scale 允许【用户】缩放的最大比例
• minimum-scale 允许【用户】缩放的最小比例
• user-scalable 是否允许用户缩放
• viewport-fit 设置为cover值可以解决刘海屏的留白问题

viewport-fit是为了控制文档是如何填充满屏幕的，有以下三种值

• auto 此值不影响初始布局视图端口，并且整个web页面都是可查看的。可contain效果一致
• contain 最初的布局视窗和视觉布局视窗被设置为最大的矩形（左图）。
• cover 初始布局视窗和视觉布局视窗被设置为设备物理屏幕的限定矩形（右图）

2、给我们要处理的节点加一个安全的padding或者margin、height

// 写法1
.bottom{
    padding-bottom: 10px; // 一定要写，在一些旧的IOS以及安卓设备上，不支持safe-area-inset-bottom安全区域。如果不写容易产生padding_bottom为0，造成距离底部0边距的情况。 这里的padding:10px;是根据UI图来定就行。
    padding-bottom: calc(10px + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}


// 写法2
.bottom{
    padding-bottom: calc(10px + constant(safe-area-inset-bottom)); /* 兼容 iOS < 11.2 */
    padding-bottom: calc(10px + env(safe-area-inset-bottom)); /* 兼容 iOS >= 11.2 */
}

//兼容不支持安全区域的旧机型
@supports not (constant(safe-area-inset-bottom)){
    .bottom{
        padding-bottom: 10px;
    }
}