Cordova构建IOS应用适配iPhone X
in Cordova with 0 comment

Cordova构建IOS应用适配iPhone X

in Cordova with 0 comment

前言

随着时代进步,可能很多人都使用上了iPhone X及以上的IOS机型,那么我们构建的IOS应用就必须做到对这种刘海屏的适配,5555!每次有各种奇葩的机型屏幕出现,遭殃的就是我们程序猿,这次我们就记录下在Cordova上如何做到适配吧!

解决方法

一、更新插件

首先需要更新一些Cordova插件以达到最新版本,因为最新版本才能保证有适配iPhone X的特性能力,列如:

如果有用到别的webview容器也需要更新

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

二、更新启动屏启动图 [重要]

推荐使用Launch Storyboard Image,具体可在官方文档查阅~

<splash src="res/screen/ios/Default@2x~universal~anyany.png" />
<!--一步到位的设置2732 × 2732的启动图即可适配全部尺寸-->

如果设置config.xml无效,可以去xcode中找到Launch Images进行设置。

三、更新HTML viewport meta

开发移动端的应该知道这个视图属性,但这次要添加一个ios11新增的属性:viewport-fit=cover,具体完整如下:

<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

Safe-Area就是iPhone X等全面屏衍生出来的产物,虽然我们已经初步实现内容全面屏化,但是因为顶部还有一部分区域是会被屏幕刘海以及底部的虚拟Home所遮挡。

这里苹果提供了Css的常量constant(safe-area-inset-top)/env(safe-area-inset-*)以方便我们使容器主体UI能做到适配,一般会使用在padding属性上:

// 不一定是加在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;
}

总结

其实实现起来也挺简单,但注意最重要的是启动图必须配置全面屏的尺寸,还有在开发时也要注意页面布局,尽量采用自适应方式去布局,以免适配时造成需要重构布局的结果,好啦~又增加了点经验!加油!

Responses