How to Hide the Address Bar in MobileSafari

May 25, 2022 0 Comments

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 maximize every available pixel. Below, we will teach you two techniques 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, and in this article I will provide two examples for you to consider. The simplest way we have found is to call a JavaScript from the onload handler in the body tag:

After we define an onload event handler, we 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:

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, and also increase usability for the visitor by making the web site behave more like a native iPhone application. I hope you have found this tutorial useful, let me know what you think.