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

1. <platform name="ios">

2. <splash height="1136" src="res/screen/ios/640_1136.png" width="640" />

3. <splash height="1334" src="res/screen/ios/750_1334.png" width="750" />

4. <splash height="2208" src="res/screen/ios/1242_2208.png" width="1242" />

5. <splash height="2436" src="res/screen/ios/1125_2436.png" width="1125" />

6. </platform>

7. 复制代码

安装cordova-plugin-statusbar

cordova plugin add cordova-plugin-statusbar

这个插件是为了修改iOS默认状态栏的颜色。

config.xml

1. <preference name="StatusBarBackgroundColor" value="#000000" />

2. 复制代码

更新HTML的meta标签

viewport-fit=cover能够使网页铺满整个手机屏幕。

1. <meta name=viewport content="width=device-width,initial-scale=1,viewport-fit=cover">

2. 复制代码

此时页面已经铺满整个屏幕，但是这不是我们想要的效果。

 

 

 

修改CSS

我们要做的其实就是让页面布局在安全区(Safe Area)之外的地方。聪明的小伙伴肯定已经想到了，对页面加个padding-top就可以，但是这个padding值是多少呢？肯定不会是某个具体数值的。对此苹果提供了safe-area-inset-top和safe-area-inset-bottom可用于css来设定具体的安全区域。

1. // 不一定是加在body上

2. body {

3. /* Status bar height on iOS 11.0 */

4. padding-top: constant(safe-area-inset-top);

5. padding-bottom: constant(safe-area-inset-bottom);

6. /* Status bar height on iOS 11+ */

7. padding-top: env(safe-area-inset-top);

8. padding-bottom: env(safe-area-inset-bottom);

9. }

10. 复制代码

 

 

 完美适配刘海屏！

 

结语

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

 

 

 

转载于:https://juejin.im/post/5c91d56de51d45397e3d0075