iphone手机变成全面屏后，底部tabbar和头部的刘海会遮挡部分节点
为了处理这些需求，iOS 11 的 Safari 引入了一些 constant、env 来处理 viewport-fit=cover 属性。
- safe-area-inset-top
- safe-area-inset-right
- safe-area-inset-left
- safe-area-inset-bottom
这些值可以应用到 margin、padding 上，也可以应用到绝对定位的 top 或 left 上。
使用方式如下
修改mate标签如下
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover"> //重点是红色部分
在css初始化的样式表里添加
@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {
footer{
padding-bottom: constant(safe-area-inset-bottom);
padding-bottom: env(safe-area-inset-bottom);
}
}
@supports是CSS3新引入的规则之一，主要用于检测当前浏览器是否支持某个CSS属性并加载具体样式.
类似@media媒体查询，比如
@supports (display: flex) {
.mc{
color: red;
}
}
当浏览器支持display:flex这个CSS属性时才应用其中的样式
所以上述代码比如在IE9下就不会显示为红色字体。
主要用在防止旧浏览器不支持某些属性造成排版混乱的情况，使用@supports当做备选项。
此外，还支持逻辑运算符；not, and, or
@supports not(display: flex){...}
@supports (display: flex) and (position: sticky){...}
@supports (display: flex) or (display: grid){...}
兼容性还是很OK的(请忽略IE浏览器)
