Skip to content

Instantly share code, notes, and snippets.

@shazron
Last active December 23, 2015 07:39
Show Gist options
  • Save shazron/6602131 to your computer and use it in GitHub Desktop.
Save shazron/6602131 to your computer and use it in GitHub Desktop.
PhoneGap / Apache Cordova - top margin for iOS 7
// Pre-requisites:
// 1. Device core plugin
// 2. Splashscreen core plugin (3.1.0)
// 3. config.xml: <preference name="AutoHideSplashScreen" value="false" />
// 4. config.xml: <preference name="DisallowOverscroll" value="true" />
function onDeviceReady() {
if (parseFloat(window.device.version) >= 7.0) {
document.body.style.marginTop = "20px";
// OR do whatever layout you need here, to expand a navigation bar etc
}
navigator.splashscreen.hide();
}
document.addEventListener('deviceready', onDeviceReady, false);
@dmcg
Copy link

dmcg commented Aug 13, 2014

Good discussion here
http://blogs.telerik.com/appbuilder/posts/13-11-07/everything-hybrid-web-apps-need-to-know-about-the-status-bar-in-ios7
but I couldn't get the referenced plugin to work

The webkit-transform knackers JQuery Mobile for me, as its footers are now off the bottom of the page. The best overall I've found for JQM is

    document.body.style.marginTop = "20px";
    $(".ui-header").css("margin-top", "20px");

@johnhight
Copy link

@dmcg Yes, using JQuery Mobile too, and the webkit-transform whites out the whole page, but your solution works great for me.

@identy
Copy link

identy commented Sep 30, 2015

body . padding -20px

by identy

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment