phonegap如何解决ios7状态栏bar显示问题

原文转自：http://www.it165.net/pro/html/201312/8574.html

在使用phonegap3.0的过程中，编译好的APP运行在IOS7系统上默认是与状态栏重叠的，而运行在IOS6及老版本中时是于状态栏分离的，如下图所示，是一个运行在IOS7下的默认状态下的APP

可以看出标题已经顶到状态栏了，如果再加上按钮，就不美观了。这时候我们可以用以下办法，使得状态栏和我们的应用分离：

Classes中找到MainViewController.m

在其中找到如下代码片段，并修改：

 

view sourceprint?

01.- (void)viewWillAppear:(BOOL)animated

02.{

03.// View defaults to full size.  If you want to customize the view's size, or its subviews (e.g. webView),

04.// you can do so here.

05.if ([[[UIDevice currentDevice] systemVersion] floatValue] >= 7) {

06.CGRect viewBounds = [self.webView bounds];

07.viewBounds.origin.y = 20;

08.viewBounds.size.height = viewBounds.size.height - 20;

09.self.webView.frame = viewBounds;

10.}

11.[super viewWillAppear:animated];

12.}

 

这样我们的应用运行起来是这样：

 

 

但是后来自己想了下，既然IOS7出来statubar和应用不再分离，也是有他的道理的，能否把APP做的既使用IOS7的特点又在IOS6上美观运行呢，我们可以这么改：

找到index.js

 

view sourceprint?

01.var app = {

02.// Application Constructor

03.initialize: function() {

04.this.bindEvents();

05.},

06.// Bind Event Listeners

07.//

08.// Bind any events that are required on startup. Common events are:

09.// 'load', 'deviceready', 'offline', and 'online'.

10.bindEvents: function() {

11.document.addEventListener('deviceready', this.onDeviceReady, false);

12.},

13.// deviceready Event Handler

14.//

15.// The scope of 'this' is the event. In order to call the 'receivedEvent'

16.// function, we must explicity call 'app.receivedEvent(...);'

17.onDeviceReady: function() {

18.if (window.device.version.substr(0,1) === '7') {

19.$('

').addClass('ios7').prependTo($('body')); } app.receivedEvent('deviceready'); }, // Update DOM on a Received Event receivedEvent: function(id) { // var parentElement = document.getElementById(id); // var listeningElement = parentElement.querySelector('.listening'); // var receivedElement = parentElement.querySelector('.received'); // // listeningElement.setAttribute('style', 'display:none;'); // receivedElement.setAttribute('style', 'display:block;'); // // console.log('Received Event: ' + id); } };

 

主要是这一段

 

if (window.device.version.substr(0,1) === '7') {
$('

').addClass('ios7').prependTo($('body'));
}

 

注意：device这个变量想要使用必须先安装phonegap的device插件

.ios7的CSS：

 

view sourceprint?

1..ios7{

2.background-color: #761C10;

3.height: 20px;

4.}

 

运行后效果：

 

方法有很多种，大家自己想想哪个适合自己吧。