Search code examples
htmlcssmobile-safarimobile-website

Hide address bar in mobile device browser

I know 1 way of doing this. 

<body onload="setTimeout(function() {window.scrollTo(0, 1)}, 100)">
...
</body>

But this works only if the page is big enough to be scrolled. If the page fits the screen the above function wont work. How to hide the address bar in this case ? I need to get it to work with iphone, ipad, android devices.

Solution

  • Maybe you can set the minheight on the body bigger. 480px screen height in vertical mode + 60px address bar height = 540px.

    Example:

    body { min-height:540px; }     
body[orient="portrait"] { min-height:540px; }
body[orient="landscape"] { min-height:400px; }