iphonex適配的n種方案

（原理見第二部分）

1、簡單粗暴的方法，不需要知道是不是iphonex，有safe area就空出來。

padding-bottom
:constant
(safe-area-inset-bottom)
;/* 相容 ios < 11.2 */
padding-bottom
:env
(safe-area-inset-bottom)
;/* 相容 ios >= 11.2 */

2、多**查詢

/* iphone x 和 iphone xs */
@media only screen and (
device-width
: 375px) and (
device-height
: 812px) and (
-webkit-device-pixel-ratio
: 3)
/* iphone xr */
@media only screen and (
device-width
: 414px) and (
device-height
: 896px) and (
-webkit-device-pixel-ratio
: 2)
/* iphone xs max */
@media only screen and (
device-width
: 414px) and (
device-height
: 896px) and (
-webkit-device-pixel-ratio
: 3)

3、js判斷寬度邏輯與多**查詢相似，判定長寬即可。適用與針對iphonex做功能適配的場景。

function
isiphonex
(fn)
else
}}

iphonex的適配問題：因為iphonex的全名螢幕及劉海的設計，所以為了頁面內容不被感測器及外殼擋住，通常來說，頁面會預設留出乙個safe area，頁面也只在這部分顯示。因此會在兩邊留白，通常來講兩邊直接留白並不好看，最好可以用背景色進行填充。但是更好的辦法就是先設定成讓頁面完全填充裝置，然後在根據頁面設計來填充danger area。讓頁面進行完全填充的方案就是在mate將viewport-fit設定成cover，這時候頁面會進行完全填充，如下：

對需要空出danger area的部分加個padding就行了。現在問題就變成了，我怎麼知道這個手機是iphonex和我到底留多少padding。為了讓開發者知道這個具體的danger area，在把view-fit設定成cover後會多出safe-area-inset-的屬性，來告知safe area和可視視窗viewport頂部，右邊，左邊，底部的間距。所以可以用support來判定手機是否支援，支援的話就說明是帶小黑條需要適配的機型。而padding的高度可以用constant(safe-area-inset-)來獲取小黑條的高度。然後這裡有個坑：constant() 在 ios11.2 之後就不能使用的，而在 ios11.2用的是另一種計算方式env，也就是說為了相容性，這兩個都要寫上。

關於方案怎麼選擇，則完全取決於業務場景。如果說只是單純的需要把頁面內容避開安全域，那就用padding的方式加safe area的距離就行。如果需要對iphonex和其他機型做不同的樣式處理可以用多**查詢判定是不是iphonex。如果是判斷端則用js判斷長寬，xs、xr同理。

iphonex適配的n種方案

iPhoneX 序列適配方案小結

H5 iphoneX適配方案

適配處理iphoneX底部的橫條

iphonex適配的n種方案

iPhoneX 序列適配方案 小結

H5 iphoneX適配方案

適配處理iphoneX底部的橫條

相關推薦

iPhoneX 序列適配方案小結