-
-
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); |
Tying it all together, taking a stab at @jlongnbt 's suggestion, using Cordova merges:
- Install the "Device" plugin:
cordova plugin add org.apache.cordova.device
- Create a file
merges/ios/css/platform.csswith the contents:
body.iOS7 {
-webkit-transform: translate3d(0, 20px, 0);
}
- Create a file
merges/ios/js/platform.jswith the contents:
$(document).on('deviceready', function () {
if (window.device && parseFloat(window.device.version) >= 7.0) {
$('body').addClass('iOS7');
}
});
- Add references to
platform.cssandplatform.jstowww/index.html:
<head>
<!-- ... -->
<link rel="stylesheet" type="text/css" href="css/index.css" />
<link rel="stylesheet" type="text/css" href="css/platform.css"/>
<!-- ... -->
</head>
<body>
<!-- ... -->
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript" src="js/platform.js"></script>
<!-- ... -->
</body>
- Ship it!
Hi, it is possible to call the "core device plugin" in a Phonegap Build app ? Like this maybe :
gap:plugin name="org.apache.cordova.Device"
?
Thanks
@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.
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
I would say just add a class on your body tag with JS if it is iOS7.
This will allow you to select with the iOS class in your CSS files and apply styles that are specific to iOS7. This way your styles are not buried in some JS file.
Makes it easier to find.