ionic/cordova 适配 IPhoneX

[pengkobe]

ionic 应用在 iPhoneX 头部刘海平行处会有白条，但是我发现 android 系统的刘海却都可以自动适配，如小米8就没问题，因此断定，应该是要更新插件了，适配步骤

1. 适配 statusbar ，更新 cordova-plugin-statusbar 插件即可，预估原理是直接拉伸 statusbar 高度进行适配
2. 适配 splash screen，更新 cordova-plugin-splashscreen 插件
3. 更新HTML viewport meta 添加viewport-fit=cover( 这个并不单单针对 iPhoneX，而是 ios11 以上都得有这个配置)
4. 让页面布局在安全区( Safe Area )之外,利用苹果提供的 CSS 常量 env(safe-area-inset-*)，可以将重要的界面元素避开刘海、圆角和横线。

参考

• https://blog.csdn.net/fighting_no1/article/details/80142985
• 安全区域配置: https://majing.io/posts/10000001151152