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.
scrollTop() and add a margin at the bottom of your page, e.g.:
- 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:
Now, for iPhone5 simply change this to:
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 :-)
Do not apply this to any other phone except for iPhone 5!
So you could do:
if (isIphone5()) $("html").css("height", "504px"); else $("html").css("height", "100%"); $("body").css("height", "100%");