CODEWITHSUNDEEP
htmlcssmobile-safarimobile-website
Prabhat
Prabhat

Reputation: 2263

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.

Upvotes: 27

Views: 59504

Answers (4)

petter
petter

Reputation: 1842

from http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/ I found

function hideAddressBar() {
  if(!window.location.hash) {
    if(document.height < window.outerHeight)
      document.body.style.height = (window.outerHeight + 50) + 'px';
    setTimeout( function(){ 
        window.scrollTo(0, 1); 
        document.body.style.height = 'auto'; 
      }, 50 );
  }
}

A bit modified

works quite well in some browsers, but at least I cannot get it to work Android Chrome.

Upvotes: 1

Amir
Amir

Reputation: 1

Just Add 'BR' at the end of the page. or you can use the jqueryUI with the div height 100%

Upvotes: -1

Tom Claus
Tom Claus

Reputation: 1291

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; }

Upvotes: 17

sanderd
sanderd

Reputation: 809

iPhone:

Works only if the mobile "app" is added to the homescreen (through the plus-icon -> add to homescreen)

<meta name="apple-mobile-web-app-capable" content="yes" />

I have no experience with other mobile OS'es, but a quick Google-search for hide browser url bar android resulted in a similar solution to yours, with a window.scrollTo.

Upvotes: 15

Related Questions