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部分
}
