之前一直用 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 配置如下代码
<preference name="StatusBarStyle" value="default"/> //默认样式
<preference name="StatusBarBackgroundColor" value="#000000" /> //导航栏颜色
然后在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, 我在这里只是提供一种解决思路 ,但也不一定能帮你解决掉..... 具体解决你可以参考下这个方法. 或者你有更好的方法 也可以私信我共同交流下. 我是暂时这么处理解决的.
