Friday, 15 November 2013

iOS7 status bar with Phonegap and JQM

Only a few weeks after battling with the new annoying iOS7 status bar for a native app, I'm now faced with the same problem while building a Phonegap with jQuery Mobile.

Some of my app's elements, particularly back buttons in headers, sit directly under the transparent status bar.

I used this solution, only slightly modified from one I found online:
$(document).delegate("div[data-role='page']", "pageinit", function () {
            if (navigator.userAgent.match(/(iPad|iPhone);.*CPU.*OS 7_\d/i)) {
                $('body').append('<div id="ios7statusbar"/>');


.ios7 .ui-page
    margin-top: 20px;

No comments:

Post a Comment

Comments are moderated, so you'll have to wait a little bit before they appear!