Skip to content

Instantly share code, notes, and snippets.

@jerkovicl
Forked from shazron/ios7.phonegap.cordova.js
Last active December 29, 2015 15:19
Show Gist options
  • Save jerkovicl/7689412 to your computer and use it in GitHub Desktop.
Save jerkovicl/7689412 to your computer and use it in GitHub Desktop.
//detects whether the app is running on an iOS device, then whether the version of iOS is 7 or greater.
//If so, margin-top workaround is applied.
//it is safe to place anywhere in the <body>.
//if your application uses a fixed header this fix will not work
var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) &&
parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7;
if (updateStatusBar) {
document.body.style.marginTop = '20px';
}
//fix for fixed header
//moves the entire viewport of the application underneath the status bar
//Mozilla/5.0 (iPhone; CPU iPhone OS 7_0 like Mac OS X) AppleWebKit/537.51.1 (KHTML, like Gecko) Version/7.0 Mobile/11A465 Safari/9537.53
var updateStatusBar = navigator.userAgent.match(/iphone|ipad|ipod/i) &&
parseInt(navigator.appVersion.match(/OS (\d)/)[1], 10) >= 7;
if (updateStatusBar) {
document.body.style.webkitTransform = 'translate3d(0, 20px, 0)';
}
//native cordova fix
//statusbar plugin
document.addEventListener('deviceready', function() {
StatusBar.overlaysWebView(false); //brimgs iOS6 style status bar to iOS7
StatusBar.backgroundColorByName('black'); //color of statusbar
}, false);
// 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);
*/
@jerkovicl
Copy link
Author

//css fix for iOS7 statusbar

.km-ios7 .km-header { margin-top:20px; }

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