How to Hide the Address Bar in Mobile Safari for iPhone

While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari. With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel. Below, we will show you two examples you can use to hide the default address bar when the page loads, allowing you to reclaim this valuable space in your iPhone presentations.

Iphone size breakdown

There are several ways to accomplish this, the simplest way we have found is as follows:

NOTE: This is deprecated in iOS 5. Check out  http://snippetspace.com/iwebkit/demo/ for iOS 5 support.

We define an on load event handler in the body tag and use a simple function to hide the scrollbar whenever the page loads. Actually, it is shifted above the viewport just out of sight. In this way, we can load content in that area while still allowing your visitors access to the controls, should they need them.

Another method is as follows:

 addEventListener("load", function() { setTimeout( hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } 

This achieves the same effect by creating an event listener and writing a simple function to handle the scrolling of the address bar.

By suppressing the default address bar we are able to reclaim this space for our presentations. I hope you have found this tutorial useful, let me know what you think.

Here’s an example. View source and copy/paste the body tag into your HTML document to apply it to your page.

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

 

Visit sunny St. George, Utah, USA

Get In Touch

We would love to hear from you.

Please enter your email address.
Please enter a valid email address.
Please enter the verification number.
You have entered a wrong verification number.
Please enter a message.
Please check your message for any errors.
Your message has been sent successfully.
Sorry, error occured this time sending your message.
* required