PhoneGap 3: iOS 7 Status Bar

Ab iOS 7 überdeckt die Statusbar standardmässig den Inhalt einer App. Das kann bei PhoneGap gleich zu drei Problemen führen:

1. Inhalt mit geringem Abstand nach oben wird überdeckt.
2. Beim Scrollen läuft der App-Inhalt unter den Status-Elementen durch.
3. Der gesamte ViewPort er App kann nach oben verschoben sein und führt zu einem Weissraum am unteren Ende des Bildschirms.

Zur Behebung des Problems kann das Cordova Statusbar Plugin installiert und der Overlay deaktiviert werden.¹

// Inside terminal navigate to project folder
cd cordova-projectfolder

// If already added, you may need to remove 
// the platform before installing plugin
cordova platform rm ios

// install plugin
cordova plugin add org.apache.cordova.statusbar

// add platform
cordova platform add ios

// build xcode project
cordova build

Nach der Installation muss das Plugin nach dem Start der App noch per JavaScript aktiviert werden. Die einfachste Art der Einbindung könnte so aussehen:

document.addEventListener("deviceready", onDeviceReady, false);

function onDeviceReady() {
    // fix ios7 statusbar bug
    StatusBar.overlaysWebView(false);
}

 

1. http://nextflow.in.th/en/2013/fix-status-bar-ios-7-ovelap-phonegap-3/ [↩]