13

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?

Improve this question
2

2 Answers 2

Reset to default
16

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:

Safari Notes

A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.

For example, use <meta name=”viewport” content=”width=1024, minimal-ui”>.

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.

enter image description here

Improve this answer
4
  • I'll wait for final release then to give a try, then I'll accept your answer. Thanks a lot.
    – svassr
    Dec 17, 2013 at 21:53
  • Hmmmm. I'm using 7.1.1 and your web app linked above does NOT hide the address bar etc when loaded. Did they break it in 7.1.1?
    – Brian B
    Jun 6, 2014 at 15:20
  • 7
    This has been removed in iOS8.
    – Charlie Schliesser
    Jul 31, 2014 at 15:45
  • 1
    Check this post about IOS8 implementation: stackoverflow.com/questions/24889100/…
    – svassr
    Jan 27, 2015 at 0:09
2

I've seen this recommended <meta name="apple-mobile-web-app-capable" content="yes"> It runs the site in standalone mode, which hides the UI. I'm unclear on how this compares to the minimal-ui solution above. I am under the impression this solution works for iOS versions before 7.1 as well.

Improve this answer
1
  • 6
    This solution only work for web page you add as an app to your home screen.
    – svassr
    Mar 31, 2014 at 18:04

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .