| 值 | 描述 |
|---|---|
| auto | 默認值，跟 contain 表現一致。頁面內容顯示在safe area內。viewprot-fit:auto等同于viewport-fit:contain |
| contain | 可視窗口完全包含網頁內容（左圖）。頁面內容顯示在safe area內。viewport-fit:contain |
| cover | 網頁內容完全覆蓋可視窗口（右圖）。頁面內容充滿屏幕。viewport-fit:cover |
constant 函數
iOS11 新增特性，Webkit 的一個 CSS 函數，用于設定安全區域與邊界的距離，有四個預定義的變量（單位是px）：
注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置viewport-fit=cover，不然 constant 函數是不起作用的，這是適配的必要條件。
env() 要替換 constant () ，目前還不可用constant ：env ：針對于iOS >= 11.2的系統注意：網頁默認不添加擴展的表現是 viewport-fit=contain ，需要適配 iPhone 必須設置 viewport-fit=cover ，這是適配的關鍵步驟。
適配例子
第一步：設置網頁在可視窗口的布局方式
<meta name='viewport' content="width=device-width, viewport-fit=cover" />
第二步：頁面主體內容限定在安全區域內
body {
/* 適配齊劉海*/
padding-top: constant(safe-area-inset-top);
/* 適配底部黑條*/
padding-bottom: constant(safe-area-inset-bottom);
}
第三步：fixed 元素的適配
bottom 不是0的情況
/* bottom 不是0的情況 */
.fixed {
bottom: calc(50px(原來的bottom值) + constant(safe-area-inset-bottom));
}
吸底的情況（bottom=0）
/* 方法1 ：設置內邊距 擴展高度*/
/* 這個方案需要吸底條必須是有背景色的，因為擴展的部分背景是跟隨外容器的，否則出現鏤空情況。*/
.fix {
padding-bottom: constant(safe-area-inset-bottom);
}
/* 直接擴展高度*/
.fix {
height: calc(60px(原來的高度值) + constant(safe-area-inset-bottom));
}
/* 方法2 ：在元素下面用一個空div填充， 但是背景色要一致 */
.blank {
position: fixed;
bottom: 0;
height: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
background-color: #fff;
}
/* 吸底元素樣式 */
.fix {
margin-bottom: constant(safe-area-inset-bottom);
}
最后： 使用@supports
因為只有有齊劉海和底部黑條的機型才需要適配樣式，可以用@support配合使用：
@supports (bottom: constant(safe-area-inset-bottom)) {
body {
padding-bottom: constant(safe-area-inset-bottom);
}
}
完整檢測代碼
@supports隔離兼容模式
因為只有有齊劉海和底部黑條的機型才需要適配樣式，可以用@support配合使用：
@mixin iphonex-css {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-left: env(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-right: env(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}
@mixin iphonex-support {
@supports (bottom: constant(safe-area-inset-top)) or (bottom: env(safe-area-inset-top)) {
body.iphonex {
@include iphonex-css;
}
}
}
@media 媒體查詢
@mixin iphonex-css {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-top: env(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-left: env(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-right: env(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom); //為底下圓弧的高度 34px
padding-bottom: env(safe-area-inset-bottom); //為底下圓弧的高度 34px
}
/* iphonex 適配 */
@mixin iphonex-media {
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
body.iphonex {
@include iphonex-css;
}
}
}
補充
注意項
env 和 constant 只有在 viewport-fit=cover 時候才能生效, 上面使用的safari 的控制臺可以檢測模擬器中網頁開啟web inspector.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
上一篇：web字體加載方案優化小結