cordova项目适配iPhoneX

参考自：

Web App适配iPhoneX
iPhone X的缺口和CSS

更新Cordova插件

首先确认使用的cordova插件有是否包含针对iPhone X的release,例如cordova-plugin-splashscreen, cordova-plugin-statusbar等.

在项目目录下打开终端，输入命令：

cordova plugin remove cordova-plugin-splashscreen//移除插件
cordova plugin add cordova-plugin-splashscreen//下载最新的插件
cordova plugin remove cordova-plugin-statusbar//移除插件
cordova plugin add cordova-plugin-statusbar//下载最新的插件，cordova-plugin-statusbar插件版本为2.3.0才能适配iPhoneX

添加iphoneX启动图

iPhoneX顶部和底部是有空余区域的，增加iPhoneX用的启动图（1125*2436）可以让画面充满屏幕。

修改一下config.xml关于ios启动图配置的部分

<platform name="ios">
<!-- 这里只加了针对iphone x的尺寸 1125 * 2436 -->
<splash height="2436" src="resources/ios/splash/Default-iOS11-812h@3x.png" width="1125" />
</platform>

如果config.xml里的配置不起作用的话，你可以在xcode9中直接给iPhoneX配置启动图片，方法如下：

在xcode9中找到Lauch Images，查看LauchImage

这里写图片描述

（1）直接在LaunchImage中往iPhoneX位置处拖放入iPhoneX的1125 * 2436尺寸的启动图片。

这里写图片描述

（2）如果你的LauchImage中没有iPhoneX型号，你可以右键LauchImage，点击Show in Finder，进入LaunchImage.launchimage文件夹，点击修改Contents.json文件,添加如下内容：

{
"extent" : "full-screen",
"idiom" : "iphone",
"subtype" : "2436h",
"filename" : "Default-iOS11-812h@3x.png",
"minimum-system-version" : "11.0",
"orientation" : "portrait",
"scale" : "3x"
},

然后重复步骤（1），就完成了。

更新HTML viewport meta

这里的改动主要是添加viewport-fit=cover,其他部分可以算是Web App的标准配置了.

<meta name="viewport" content="initial-scale=1, width=device-width, height=device-height, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover">

更新CSS

我们要做的其实就是让页面布局在安全区(Safe Area)之外的地方.聪明的小伙伴肯定已经想到了,对页面加个padding-top就可以,但是这个padding值是多少呢?肯定不会是某个具体数值的.对此苹果提供了safe-area-inset-top和safe-area-inset-bottom可用于css来设定具体的安全区域.注意为你的项目添加个默认的背景色background-color，不然安全区的背景色默认是白色的。

// 不一定是加在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);
backgroup-color: #000;
}