随着iOS 11以及iPhone X的发布，以前使用ionic1开发的APP也需要针对iOS 11和iPhone X做相应的适配工作。
一、适配iOS 11
首先放上适配前和适配后的图片，让大家有一个直观的对比。
iOS 11适配前.png
iOS 11适配后.png
看了图片之后想必大家都看出来了，其实适配iOS 11最主要就是要解决导航栏往下移了20px的问题。
因为有使用ionic3来写过demo，所以知道这个问题在ionic3上是被解决了。
一开始，以为是通过修改iOS原生代码来实现的。再通过对比ionic1项目和ionic3项目的相关原生代码，发现两者的代码几乎一模一样的，所以确认并不是通过修改原生代码来实现的。
然后，在网上搜索一通之后，发现有个插件cordova-plugin-ionic-webview可以解决状态栏的问题。
于是，抱着试一试的心态安装了该插件，发现确实可以解决状态栏的这个问题。但是，同时也带来了一个新的问题，APP无法访问接口数据，就算配置了白名单也还是不行。当然该插件的这个问题在ionic3上貌似是得到解决了的。
所以同样，该方案也就宣告失败了。
最后，就在几乎要放弃的时候，胡乱搜索到了viewport的相关资料，于是才初见端倪。
关于viewport的相关说明这儿就不再赘述。
所以，最终的解决方案就在index.html中的viewport的配置上面。
这是未修改前的viewport的配置
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
这是修改后的viewport的配置，完美适配iOS 11，直接从ionic3项目里面的index.html中复制过来的。
<meta name="viewport"
content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
二、适配iPhone X
按照惯例，首先还是先上图。
iPhone X适配前.jpeg
iPhone X适配后.jpeg
从第一张图片中可以看出在屏幕的上下两端都出现了黑边，这其实就是没有适配iPhone X而出现的兼容模式。
第二张图片就是适配好了的截图，终于可以看到iPhone X漂亮的刘海了。
顺带吐槽一下iPhone X的刘海，借用别人的话来说就是“惊艳了用户，苦逼了开发”！
解决办法：
- 把原来resources文件夹里面的splash.png图片替换为2372*2372的大小；
- 使用ionic cordova resources命令重新生成资源图片，你会发现ios的资源文件里面多了一张Default@2xuniversalanyany.png图片。
使用ionic cordova resources命令，顺带也把Xcode更新到v9之后需要再添加一张1024的APPIcon的问题解决了。 - 重新打包iOS即可完成iPhone X的适配。
网友评论