Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch

Solution 1:

Update September 2014: iOS 8 has removed the minimal-ui feature There's again no way to remove/hide navigation bars other than to rely on the default browser behavior (bars will be hidden when scrolling, but only if the scrolling element is the BODY of the page). The only "workaround" is to save the app to the homescreen and have the proper meta tags set (see below).

Update August 2014: iOS 8 (beta) no longer supports minimal-ui. There's no workaround. (The reason for this is likely due to abuse by websites that used it to try to prevent people from navigating away, tho there may be new features in iOS 8 Safari that have not been made public yet that replace minimal-ui.)

iOS 7.1 added a new API to solve this problem:

<meta name="viewport" content="minimal-ui">

This new viewport flag hides the Safari UI by default (only a small title bar with URL and SSL indicator are shown). To access the Safari UI, users must actively tap this title bar.

Note that on iOS 7.0.x, there's no API or known workaround for this. In those versions, if you want to hide Safari's browser chrome permanently you need to either get the user to add the web app to the home screen (with the appropriate meta tags set <meta name="apple-mobile-web-app-capable" content="yes">) or use some sort of native app wrapper like Phonegap and distribute via the App Store.

Personally, I wish they hadn't removed the "full screen" button they introduced in landscape mode on iOS 6 Mobile Safari, which was a great solution that made developers and users happy.

A perfect candidate for this to be solved more permanently would be for Mobile Safari to support the HTML5 full screen API (which is supported on Safari on OS X!). Alas, there's no support right now and historically iOS point releases didn't add new Safari features, so maybe that's something for iOS 8.

Solution 2:

UPDATE: There is a meta property for fixing this currently in iOS7.1 Beta according to this forum post on the release notes.

<meta name="viewport" content="minimal-ui">

I have run a test and can confirm this feature is currently in Beta 2.

Solution 3:

NOTE: The new minimal-ui option is a great solution but it needs to be part of the HTML response. I tried on iOS7.1 beta3 to append the viewport meta tag with JS

$('head').append('<meta name="viewport" content="width=device-width, user-scalable=0, minimal-ui">');

the value "minimal-ui" is ignored by the browser.