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瀏覽器)
