1. 基礎設備信息
-
首先在了解iPhoneX適配之前,需要了解關于iPhone設備的一些基礎
1) 關于iPhone的一些基礎參數
設備信息.png
2) iPhoneX設備信息
- iPhoneX屏幕組成:上部齊劉海sensor housing(44pt) + 安全區域safe area + 底部手勢區域Home Indicator(34pt)
-
safe area(安全區域)
safeArea.png - 安全區域以外的是上部“齊劉海” 和 下部“手勢區域”,一般情況下,我們都會在安全區域(safe area)中進行頁面的編寫;
2. iPhoneX適配
1)適配方案viewport-fit、css constant()、媒體查詢
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
- viewport-fit有兩個值,
contain
和cover
默認是contain
,頁面內容顯示在safe area中(不包括上部的齊劉海和下部的手勢區域)
cover
值:頁面內容充滿屏幕 - css constant()
有四個值:safe-area-inset-top
,safe-area-inset-left
,safe-area-inset-right
,safe-area-inset-bottom
1)當viewport-fit:contain,上面這個四個值無效
2)當viewport-fit:cover,這四個值需要設置,頁面才會顯示在安全區域中,設置如下:
body {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px
}
- 媒體查詢
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
// iphoneX css部分
}
3. 總結
- 一般情況下iPhoneX適配方法有三種
- viewport-fit:contain
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=contain">
- viewpoer-fit: cover + css canstant()
<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover">
body {
padding-top: constant(safe-area-inset-top); //為導航欄+狀態欄的高度 88px
padding-left: constant(safe-area-inset-left); //如果未豎屏時為0
padding-right: constant(safe-area-inset-right); //如果未豎屏時為0
padding-bottom: constant(safe-area-inset-bottom);//為底下圓弧的高度 34px
}
- css的媒體查詢
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3){
// iphoneX css部分
}