解决Cordova开发的iOS的app界面被状态栏覆盖

2016年05月05日 15:00:42

   在使用cordova6.0的过程中,编译好的APP运行在IOS7+系统上默认是与状态栏重叠的,而运行在IOS6及老版本中时是于状态栏分离的。

   解决办法如下:

   把文件MainViewController.m中的方法viewWillAppear进行相关修改如下。 作用是更改view的边界,使其下移20px,刚好是状态栏的高度。

  

- (void)viewWillAppear:(BOOL)animated
{
    // View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),
    // you can do so here.
    if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
    {
        CGRect viewBounds=[self.webView  bounds];
        viewBounds.origin.y=20;
        viewBounds.size.height=viewBounds.size.height-20;
        self.webView.frame=viewBounds;
    }

    [super viewWillAppear:animated];
}

  另外有一个奇怪的现象就是当,我在html页面内调用系统相机以后再返回,整个页面底部会有白色的空白控件,用调试工具查看后空白区域的高度是20px.该如何解决?

  由于整个cordova项目相当于一个页面的应用,不同的模块聚集在一起,所以当当前屏幕消失后(比如进入系统相机拍照页面)再出现的时候,还是会执行上面的代码,所以界面高度再次减少20px.

解决方法如下: 在MainViewController.m中添加如下代码:

-(void)viewWillDisappear:(BOOL)animated
{
    
    if([[[UIDevice currentDevice]systemVersion ] floatValue]>=7)
    {
        CGRect viewBounds=[self.webView  bounds];
        viewBounds.origin.y=20;
        viewBounds.size.height=viewBounds.size.height+20;
        self.webView.frame=viewBounds;
    }
    
    [super viewWillDisappear:animated];
    
    
    
}

这样就ok了。







Phonegap修改全屏/非全屏设置 Html5

Phonegap全屏/非全屏设置 cordova 3.4 修改屏幕配置 修改参数来设置WebView全屏  或者  非全屏 在工程的 res/xml目录下的config.xml 如下图:   在co...
  • aaawqqq
  • aaawqqq
  • 2014年03月28日 22:44
  • 6288

webView 默认距离顶部20的解决办法

若无导航栏的情况下,webview默认距离顶部20;效果是这样: 若想去除这20的距离,加上这句代码即可:self.edgesForExtendedLayout = UIRectEdgeNone...
  • yi_zz32
  • yi_zz32
  • 2016年11月24日 08:57
  • 2246

phonegap解决iphone顶部状态栏位置的问题

在 iOS7, 所有的应用都是全屏运行的,此时状态栏层叠在应用界面上. 导致头部的内容或者界面被覆盖:    社区中讨论解决该问题的方法. 他们中的一些涉及原生代码,以兼容web视图.其实最简单和...
  • alex8046
  • alex8046
  • 2015年02月15日 16:13
  • 4180

解决Cordova开发iOS的app界面被状态栏覆盖的问题

方法一: 先在Info.plist中添加:View controller-based status bar appearance 并将其值设置为NO。 在MainViewController.m实...
  • zbheart_95588
  • zbheart_95588
  • 2016年04月13日 20:53
  • 1618

cordova Statusbar状态栏插件的使用

cordova的Statusbar为app提供设置状态栏背景色的功能,官方文档:http://cordova.axuer.com/docs/zh-cn/latest/reference/cordova...
  • u012426959
  • u012426959
  • 2017年09月04日 13:47
  • 825

cordova-plugin-statusbar状态栏设置整理

一、Cordova StatusBar简介 1.全局对象StatusBar 提供了修改设备状态栏的方法,需要在deviceready事件之后使用。 2.iOS中接口都支持,Android支5.0以下版...
  • u011127019
  • u011127019
  • 2017年02月27日 16:20
  • 3847

解决IOSwebview加载H5页面点击2次会上移方案

在IOSwebview 我们嵌入H5页面的开发的时候, 在H5的空白页面双击2次页面会上移动 (function() { var agent = navigator.userAg...
  • cy_baicai
  • cy_baicai
  • 2018年01月26日 14:59
  • 137

Android 集成5+webview时,改变状态栏的颜色

由NJS控制状态栏的颜色 在节点之下添加一下代码 function plusReady(){ plus.navigator.setStatusBarBackground('#f4f4f4...
  • Hello_litao
  • Hello_litao
  • 2018年01月31日 10:46
  • 18

UIWebView顶部20点的空白条,和状态栏似的,终于去掉了

做个电子书的应用,用了UIWebView,顶部一直有20点的背景色的空条,然后各种排查,什么subview,什么frame,什么contentSize等等,还是没能解决,而且都没头绪了。后来经一高手指...
  • u011439689
  • u011439689
  • 2015年04月21日 15:55
  • 3630

ionic cordova 控制iOS状态栏的显示,隐藏,颜色

Cordova 插件地址: http://plugins.cordova.io/ 访问, 您可以在其中搜索cordova插件,搜下statusbar: 在命令终端: ...
  • egoist1925
  • egoist1925
  • 2016年04月13日 11:25
  • 1479
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:解决Cordova开发的iOS的app界面被状态栏覆盖
举报原因:
原因补充:

(最多只允许输入30个字)