当前位置:首页 > 笔记 > cordova项目适配iPhoneX

cordova项目适配iPhoneX

nyoung1个月前 (05-04)笔记126

更新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

image.png



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

image.png


(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;

}


发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。