Hiding the iPhone’s URL Bar

Subscribe

Also available for download on Studio Hyperset‘s Google code project site.

Having trouble tracking down a reliable way to hide the iPhone’s URL bar on page load, I cobbled together several sources. The most effective solution for hiding the iPhone’s URL bar follows:

To hide the iPhone’s URL bar on page load, add the following to the <head> section of your site/page:

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Add the following JavaScript function to the same section between a <script></script> tag pair:

if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}

function hideURLbar() {
window.scrollTo(0, 0);
}

Of course, you can also call this function from an external .js file, if you wish, e.g.:

<script type="text/javascript" src="http://www.example.com/scripts/hide-iphone-address-bar-function.js"></script>

Both will hide the iPhone’s URL bar on page load.

Essentially, the whole layout for hiding the iPhone’s URL bar on page load will look something like the following (where ellipses […] indicate the presence of other content):

<html>
<head>


<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />


<script>if (navigator.userAgent.indexOf('iPhone') != -1) {
addEventListener("load", function() {
setTimeout(hideURLbar, 0);
}, false);
}</script>


</head>
<body>


</body>
</html>

In addition to hiding the iPhone’s URL bar on page load, you can control other iPhone layout options via the “viewport” meta tag:

<meta name="viewport" content="options go here" />

See iPhoneWebDev, among other sites, for options and more information.

Build great relationships with your customers and teammates

Download this eBook

    Learn how effective communication systems can help you build great relationships with customers and teammates.

Quimby Melton

Founder/President

Quimby is the founder and president of Studio Hyperset. He started Studio Hyperset in 2006 after studying Transatlantic literature and culture, new media, and humanities computing at the Universities of Georgia (AB, 00) and Nevada, Las Vegas (MA, 03; PhD, 08). He has a background in literary studies, media production, front-end development, and project management. His current primary duties involve helping clients frame solutions that meet their needs; scoping and managing Studio Hyperset's growth strategy and business development pipeline; finding and developing talent; and, most importantly, supporting the SH team.