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").addClass("ios7");
                $('body').append('<div id="ios7statusbar"/>');
            }


        })

#ios7statusbar
{
    width:100%;
    height:20px;
    background-color:white;
    position:fixed;
    z-index:100;
}
 
.ios7 .ui-page
{
    margin-top: 20px;
}