How to Hide the Address Bar in MobileSafari

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.

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

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

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

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:

<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(
hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>

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.

You may want to like this now ➡➡

To your continued success in life and business.

Was this post helpful? If so, I would totally appreciate you commenting below and clicking "like" above.

Shaun Mackey
I help people make websites better, faster and more profitable for their online business.
Contact me here.

 

Enter Your Comments Below:

comments

Trackbacks