本文主要是介绍cordova项目适配iPhoneX，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
最烦的就是手机端的各种适配了，哈哈
更新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;
}
这篇关于cordova项目适配iPhoneX的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
