ionic3 适配 ios11 状态栏问题

之前一直用 cordova 去打包生成 ipa 包.  在ios上运行的都好好的.     但是升级到ios11后, 突然发现 预留的20px的 状态栏高度没了.   这个就有点坑,  查了下ios11的一些改动发现, 原来是某些系统方法失效造成  :

 情况1. 状态栏默认为白色. 但为多出来了20px.(需要做隐藏处理)    

 情况2.  直接没有预留20px, 状态栏直接覆盖在内容上

我这里遇到的是情况2的问题  

解决方案是 使用  cordova-plugin-ionic-webview插件 来控制 

具体的安装

官网

https://github.com/ionic-team/cordova-plugin-ionic-webview#installation-instructions

或者  CSDN 有同类猿  整理的文章  

http://blog.csdn.net/u011127019/article/details/58104056

具体是解决是  在config.xml   配置如下代码

      //默认样式

   //导航栏颜色

然后在app.componet.ts 中做版本判断        ionic 官网上 有获取你当前运行环境版本你的判断.     

区分ios11版本 与 ios11之前的版本.  分别设置 StatusBar.overlaysWebView     

if(platform.versions().ios) {

         if(platform.versions().ios.num < 11) {

            statusBar.overlaysWebView(true);

       }else{

     statusBar.overlaysWebView(false); 

     }

}

设置完城后, 发现之前处理的 app.css中 内容内容距离顶部的top值 也是有影响的

.platform-ios{     .enwrap {  padding-top: 118px;   } }      

在ios  11上显示 留有  20像素的空白多余高度   

所有审查元素发现.  对应的样式类还真有  platform-ios11这个类名包裹在最外层..

即:    可以控制不同平台及版本下的样式.   

所有 在 app.css 中,   直接  

.platform-ios{ .enwrap {  padding-top: 118px;   } }

.platform-ios11{ .enwrap {  padding-top: 98px;   } }   //ios 11 下单独处理 距离顶部的高度值.

然后在ios11  以及ios11以前版本 就完美的处理了.  

可能遇到的情况不同,  或者说类似的bug,    我在这里只是提供一种解决思路 ,但也不一定能帮你解决掉.....    具体解决你可以参考下这个方法.  或者你有更好的方法  也可以私信我共同交流下.    我是暂时这么处理解决的.