最烦的就是手机端的各种适配了,哈哈
更新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;
}