How to hide the address bar on iPhone5 Safari browser

If you created a website with 100% height, you might encounter the problem that iPhone5 doesn’t hide the address bar while iPhone 4/4s and older do hide it.

Existing solutions

There are quite some JavaScript-based solutions on this issue that use scrollTop() and add a margin at the bottom of your page, e.g.:

• Hide address bar and status bar in iphone using javascript and html
• hide iPhone address bar with 100% height
• How to remove Address Bar in Safari in iOS5?
• How to hide the address bar in a full screen iPhone or Android web app

That’s pretty complicated and I encountered the problem that this approach can lead to whitespace at the bottom of your page.

So I found a really way easier solution.

The better approach

Since you created a website with 100% height, I assume that you applied via css:

html,body{height:100%}

Now, for iPhone5 simply change this to:

html{height:504px}
body{height:100%}

This will tell Safari that your website is just 1px taller than the maximum visible part of your html document and the browser will automatically hide the address bar. That simple :-)

Warning!

Do not apply this to any other phone except for iPhone 5!

If you need to detect iPhone5, I recommend this script: Simple iPhone 5 detection with JavaScript

So you could do:

if (isIphone5()) $("html").css("height", "504px");
else $("html").css("height", "100%");
$("body").css("height", "100%");