cordova應用相容iOS11+和iPhoneX劉海屏

前言

最近開發的cordova應用需要相容 iOS 11+ ,以及 iPhone X 的劉海屏，查了一些資料，這裡做下總結。

首先看下正常打包後的App介面，上下有明顯的黑色區域，並沒有佔滿整個螢幕。

安裝啟動頁外掛和狀態列外掛

安裝cordova-plugin-splashscreen

cordova plugin add cordova-plugin-splashscreen

根據官方文件的定義，iOS下的啟動圖尺寸是有嚴格要求的，且根據不同型號需要新增不同解析度的圖片。因為只需要適配手機，所以選了以下的尺寸。

另外，iPhone的劉海屏，需要單獨存放一張1125*2436的啟動圖，才能讓畫面充滿整個螢幕。（important!）

這裡還有個坑，jpg在Simulator雖然正常，但是真機除錯的時候發現並不成功，需要將啟動圖格式改成png。（important!）

config.xml

<platform name="ios">
    <splash height="1136" src="res/screen/ios/640_1136.png" width="640" />
    <splash height="1334" src="res/screen/ios/750_1334.png" width="750" />
    <splash height="2208" src="res/screen/ios/1242_2208.png" width="1242" />
    <splash height="2436" src="res/screen/ios/1125_2436.png" width="1125" />
</platform>
複製程式碼

安裝cordova-plugin-statusbar

cordova plugin add cordova-plugin-statusbar

這個外掛是為了修改iOS預設狀態列的顏色。

config.xml

<preference name="StatusBarBackgroundColor" value="#000000" />
複製程式碼

更新HTML的meta標籤

viewport-fit=cover能夠使網頁鋪滿整個手機螢幕。

<meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">
複製程式碼

此時頁面已經鋪滿整個螢幕，但是這不是我們想要的效果。

修改CSS

我們要做的其實就是讓頁面佈局在安全區(Safe Area)之外的地方。聰明的小夥伴肯定已經想到了，對頁面加個padding-top就可以，但是這個padding值是多少呢？肯定不會是某個具體數值的。對此蘋果提供了safe-area-inset-top和safe-area-inset-bottom可用於css來設定具體的安全區域。

// 不一定是加在body上
body {
    /* Status bar height on iOS 11.0 */
    padding-top: constant(safe-area-inset-top);
    padding-bottom: constant(safe-area-inset-bottom);
    /* Status bar height on iOS 11+ */
    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);
}
複製程式碼

完美適配劉海屏！

結語

程式碼創造世界，世界屬於三體。後會有期。