iphonex 已經上線有一段時間了，作爲業界劉海屏幕第一款機型，導致全屏不能正常的全屏顯示了，，所以需要對
iphonx 適配，下面就詳細說說如何適配
先看一張適配前後的圖:
iphonex 提供的 meta 頭
<meta name="viewport" content="viewport-fit=contain">
<meta name="viewport" content="viewport-fit=cover">
<meta name="viewport" content="viewport-fit=auto">
contain
可視化窗口完全包含網頁內容
cover
網頁內容完全覆蓋
auto
默認值和 contain 一樣
詳細見下圖(無恥盜圖):
注意：網頁默認不添加擴展的表現是 viewport-fit=contain，需要適配 iPhoneX 必須設置
viewport-fit=cover，這是適配的關鍵步驟。
ios11 增加新特性，webkit 的 css 函數
爲了應對劉海屏幕，蘋果也給出了響應的策略
css 預定義變量
四個預定義變量爲設定安全區域和邊界的距離，如下:
- safe-area-inset-left：安全區域距離左邊邊界距離
- safe-area-inset-right：安全區域距離右邊邊界距離
- safe-area-inset-top：安全區域距離頂部邊界距離
- safe-area-inset-bottom：安全區域距離底部邊界距離
safe-area-inset-left
一般情況下是 0
safe-area-inset-right
一般情況下是 0
safe-area-inset-top
在劉海全屏的時候 top 爲 44px
safe-area-inset-bottom
劉海全屏的條件下是 34px
css 函數 env() 和 constant()
這兩個函數都是 webkit 中 css 函數，可以直接使用變量函數，只有在 webkit 內核下才支持
env 函數
必須在 ios >= 11.2 才支持
constant 函數
必須 ios < 11.2 支持
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.
兼容前後版本代碼
padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);
看下圖:
兼容代碼
下面寫的是 scss
.phonex {
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
}
完整檢測代碼
@supports 隔離兼容模式
@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.
https://webkit.org/blog/7929/... >
https://aotu.io/notes/2017/11...