Hiding the URL toolbar in Safari for iPhones

To get the look and feel of an app in the browser it is necessary to hide the url toolbar from the browser. This is very easy to do, by telling the page to scroll to 1px from the top and making sure the height of the container is at least as high as the screen.

The CSS

div#container {
height: 600px; /* This figure could be better matched to the available area */
}

The JS (to be placed just before the closing </body> tag).

<script>
/mobile/i.test(navigator.userAgent) && !window.location.hash && setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
</script>

This may also apply to other mobile browsers.

About Keiron

Web Developer based in the UK. Click here if you want to work with me