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

by

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.

More Related Contents:

  1. Programmatically selecting text in an input field on iOS devices (mobile Safari)
  2. Prevent orientation change in iOS Safari
  3. Video auto play is not working in Safari and Chrome desktop browser
  4. iOS JavaScript bridge
  5. HTML5 Canvas drawImage ratio bug iOS
  6. Programmatically play video with sound on Safari and Mobile Chrome
  7. Invoke native date picker from web-app on iOS/Android
  8. Why can’t JavaScript .play() audio files on iPhone safari?
  9. Is “localStorage” in Firefox only working when the page is online?
  10. Why aren’t Safari or Firefox able to process audio data from MediaElementSource?
  11. Can I use Javascript to get the compass heading for iOS and Android?
  12. How can I request an increase to the HTML5 localstorage size on iPad, like the FT web app does?
  13. Prevent iOS bounce without disabling scroll ability
  14. createImageBitmap alternative on Safari
  15. How to detect device name in Safari on iOS 13 while it doesn’t show the correct user agent?
  16. How do I hide the address bar on iPhone?
  17. How to open Safari from a WebApp in iOS 7
  18. Low power mode detection in JavaScript for iOS11?
  19. Does “localStorage” in Firefox only work when the page is online?
  20. onclick=”location.href=’link.html'” does not load page in Safari
  21. jQuery/JavaScript collision detection
  22. How to validate inputs dynamically created using ng-repeat, ng-show (angular)
  23. JS function named `animate` doesn’t work in Chrome, but works in IE
  24. When is NodeList live and when is it static?
  25. How do I re-trigger a WebKit CSS animation via JavaScript?
  26. Open Safari / Google Chrome developer tools programmatically from JavaScript
  27. How to add validation/restrictions for HTML5 date field without jquery/javascript
  28. Image Manipulation – add image with corners in exact positions
  29. Reading multiple files with Javascript FileReader API one at a time
  30. Rename Object Key in an array using javascript

Leave a Comment