Hide Address Bar In Mobile Device Browser

I know 1 way of doing this. ... But this works only if the page is big enough to be scroll

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

Solution 2:

iPhone:

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

<metaname="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.

Solution 3:

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

functionhideAddressBar() {
  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.

Solution 4:

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