首先在<head>的<meta name="viewport">中加入“viewport-fit=cover”
<meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1, user-scalable=0, minimun-scale=1, maximun-scale=1">
viewport-fit有两个选项（default是auto）
| 值 | 含义 |
|---|---|
| auto | 默认：viewprot-fit:contain;页面内容显示在safe area内 |
| cover | viewport-fit:cover,页面内容充满屏幕 |
然后给涉及到安全区域的元素加style
.footer{
width: 100%;
height: 1rem;
position: fixed;
bottom: 0;
left: 0;
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom:env(safe-area-inset-bottom);
background-color: #fff;
}
The env() function shipped in iOS 11 with the name constant(). Beginning with Safari Technology Preview 41 and the iOS 11.2 beta, constant() has been removed and replaced with env(). You can use the CSS fallback mechanism to support both versions, if necessary, but should prefer env() going forward.
即 iOS 11.2之前用constant()，之后用env()，需要都写上用于兼容。
注意：如果fit-content设置的是auto，则safe-area-inset-bottom等不起作用。
遇到问题：
- 对于底部安全区问题，如果设置margin-bottom则底部会“空”出来（如下图），为了不空，需要将安全区设置到padding-bottom上（注意设置background-color的值），因为背景颜色的范围是content+padding。
- 注意底部元素的盒子模型，如果设置了border-box，并且设置了height，则改变padding-bottom并不会改变距离底部的高度（总体高度不变），不能起到安全区的效果。
