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);
}
复制代码

完美适配刘海屏！

结语

代码创造世界，世界属于三体。后会有期。