Q:

jQuery Mobile with Cordova - Header overlapping with iOS Status Bar

I'm just getting started with Apache Cordova and jQuery Mobile, the entire shebang is new to me.  I'm having trouble with my header (with the useful text of "HEADER!")  over/underlapping the status bar (the time) on the iOS Emulator.  I know I can do something like style="margin-top: 1.3em;" and that will hack around the problem, but I presume there is a proper fix for this issue?  I know I can turn the status bar off using Cordova, but I'd like to leave it on and simply have the header properly placed. 
The HTML is in a gist. 
Screenshot:

Cordova Version -- 5.3.1
iOS Emulator -- 8.4
OS -- Apple OSX 10.10.4
jQuery -- 2.1.4
jQuery Mobile -- 1.4.5

A:

To have the statusbar still visible but not overlayed, you have to install the cordova-plugin-statusbar and set in your startup routine inside onDeviceReady:
        StatusBar.overlaysWebView(false);

It is also usefull to set the background color according to your app style:
        StatusBar.backgroundColorByHexString("#333"); // => #333333  

Hope this helps!