iOS7 Header adjustment for PhoneGap/Cordova

iOS7 Header adjustment for PhoneGap/Cordova

Posted by on Nov 11, 2013 in Apps, Development, Tutorial

iOS7 Header adjustment for PhoneGap/Cordova

In iOS7 Apple have enabled the full screen display of Applications.  This means that the status bar (where the battery, time and cellular signal dots appear) no longer is on it’s own outside of the app instead now, it’s very much a part of the app.   With this, all PhoneGap based apps have had to adjust the headers or body to accommodate the status bar.

I have seen many ways of achieving this,  many using native Objective-C to add 20px to the body of the view.  I personally went for adding 20px to the header as opposed to the body.  This is how I did it (using the latest jQuery):

 

function iOSversion() {

if (/iP(hone|od|ad)/.test(navigator.platform)) {
var v = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);
return [parseInt(v[1], 10), parseInt(v[2], 10), parseInt(v[3] || 0, 10)];
}
else{
return false;
}
}

ver = iOSversion();

 

if (ver[0] >= 7) {
$(window).load(function(){
$('#header').css('padding-top','20px');
});
}

This basically checks if the device you are on is an iDevice (iPhone/iPod or iPad), it then stores the OS version into an Array.   We then check if the array is greater or equal to iOS7 (to be future proof).   If the iOS >= to 7 we then add a 20px top padding to the header div.

This works as of November 2013, using the latest PhoneGap/Cordova and Xcode.  This just adds a padding to the header, but if your header consists of a background-image it may prove a bit trickier.  You would need to use a different image that has an extra 20px height,  plus you would need to push the text/content down by 20px,  you can still use the same method above to achieve this.

Post a Reply