Update 2: iOS 7.1 allows us to remove the nav bar using “minimal-ui” in the meta tag
Update: Since iOS 7, hiding the navigation bar no longer works using the method below, or any method I could find. If anyone finds a solution to this, please let me know 🙂
Recently, I’ve been working on some interactive, smartphone optimised websites using jQuery and have wanted to maximise the visible pixel area available on the iPhone screen. By removing the top address navigation bar, we can free up an additional 60 pixels (older iPhone models) or 120 pixels (iPhone 4+), which is about a fifth of the visible area when viewed in landscape mode.
This can make a huge difference when developing mobile websites or web apps; not only can as you can fit a decent amount of extra content into this space but it also makes the web app look much more native.
The below JavaScript works if you are using the jQuery framework and will hide the navigation bar when the page loads.
(function($) { $(document).ready(function() { setTimeout(function () { window.scrollTo(0, 0); }, 100); }); })(jQuery);
I have also found it useful to keep the navigationaddress bar hidden when the iPhone rotates to change orientation. The below JavaScript will do just that and you can add it immediately below the setTimeOut function as shown above:
$(window).bind('orientationchange resize', function(event){ var orient = window.orientation; if(orient == 0) { //0 = portrait, -90 or 90 = landscape window.scrollTo(0, 0); } else { window.scrollTo(0, 0); } });
It is worth noting that this JavaScript code to hide the navigation bar will only work when there is scrollable content. If for example, you have a web page that’s full of absolutely positioned divs and none of this content scrolls, then you will need create some scrolling content. For example by positing a DIV element below the bottom of the page.
Hiding the navigation and address bar in Safari (iOS 7.1) »
As of iOS 7.1 adding “minimal-ui” to the viewport metatag removes the navbar. E.g: . Hope this is useful.
seems not to work anymore?!