ionic-适配iphoneX

首先，我的项目是在ionic1环境下创建的，后来升级到ionic3环境，项目还是ionic1的。
接下来就是适配iPhone X了：
具体就是状态栏和‘刘海’冲突，tabs等需要底部留白，官方已经解决适配问题。
1、增加viewport-fit=cover
<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">
2、创建一个最新的ionic1工程ionic start helloworld --type ionic1
复制/helloworld/www/lib/ionic/到自己项目下/lib/ionic/（也就是替换）
3、更新cordova-plugin-statusbar插件；
4、安装插件ionic cordova plugin add cordova-plugin-ionic-webview
5、项目下运行npm i ionic-angular@legacy

更新：更新cordova-plugin-statusbar，要使用如下命令：

cordova plugin rm cordova-plugin-statusbar
cordova plugin add https://github.com/apache/cordova-plugin-statusbar.git

image.png

不是所有步骤都清楚，只是按照ionic团队指示完成适配；
具体细节：
http://blog.ionicframework.com/ios-11-checklist/
https://github.com/ionic-team/ionic-v1/issues/317

祝好！

注意：适配iphoneX后，在android上可能会出现statusbar背景黑色（我遇到了），导致电量、信号等黑字显示不出，需要修改statusbar颜色：

if (window.StatusBar) {
        if (ionic.Platform.isAndroid()) {
          StatusBar.backgroundColorByHexString("#ccc");
        } 
}