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.

回答1:

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

回答2:

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.

回答3:

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.