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);
}
複製代碼

完美適配劉海屏！

結語

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