Is it possible to hide the address bar and status bar in iOS 7?
In a landscape app I'm currently using the below code to do it for previous iOS versions and it work well even on IOS 7: when opening the page it goes full screen and stay so.
JS:
window.addEventListener("load",function() {
// Set a timeout...
setTimeout(function(){
// Hide the address bar!
window.scrollTo(0, 1);
}, 0);
});
HTML:
<!-- For iOS web apps -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="AMC Walking Dead Story Sync">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
The fact is that on iOS 7 iPhone and iPad when tapping the bottom of the screen the address bar and status bar appear and the only way to get rid of it is to change the phone orientation and then change it back to the previous orientation.
Is there anyway to avoid that manipulation?
Best Answer
There is a method:
<meta name="viewport" content="minimal-ui”>
(but it only works on iOS 7.1 - not on 7.0 nor 8.0)
source: StackOverflow
More details, from iOS 7.1 beta 2 change log and release notes:
update: I confirmed this method works in iOS 7.1 (official final release). You can confirm for yourself with my web app, which uses the meta tag solution described above.