-
-
Save shazron/6602131 to your computer and use it in GitHub Desktop.
| // 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); |
I am injecting the style by adding this to the script in the head:
if(navigator.userAgent.match(/iP[ha][od].*OS 7/)) {
document.write('<style type="text/css">body{-webkit-transform: translate3d(0,20px,0)}</style>');
}
Problem is, the status bar then has a white background on ios7+, pre iOS7 it shows black background statusbar with light content. I want it to have a blue background on any iOS version.
I tried changing the XIB to blue background, but that won't work since it seams to move the entire view down 20px.
Thoughts? TIA
(It's using UIStatusBarStyleDefault)
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");
@dmcg Yes, using JQuery Mobile too, and the webkit-transform whites out the whole page, but your solution works great for me.
body . padding -20px
by identy
@louisdoe Yes, I'm using phonegap build to create my .apk and .ipa files with
<gap:plugin name="org.apache.cordova.device" />in my config.xml file. Without problems.