Question

I’m creating a mobile web app (not native), and I want to use the complete screen height for my application. The problem is that the address bar of the browser takes up a lot of space, leaving me with about 4/5 of the entire screen.

I’ve made my app so that there’s never any scrolling, the site always fits the height of the user’s screen. What I’m really after, is what the facebook mobile website does. It scrolls down to hide the address bar.

Is there any universal way of doing this, for Android devices as well as Iphone, and in different mobile browsers (different address bar sizes)?

BTW: I’m using Iscroll4 to get a fixed footer and header.

EDIT: This is the code I ended up with. I added two button to let the user choose whether or not to use fullscreen mode. This code works in combination with Iscroll4 and Jquery.

<script type="text/javascript">
$(document).ready(function() {
    var fullscreen = false;

    if(fullscreen==false)
    {
        window.removeEventListener("orientationchange", function(){ hideAddressBar(); } );
        window.addEventListener("orientationchange", function(){ showAddressBar(); } );
    }
    else
    {
        window.removeEventListener("orientationchange", function(){ showAddressBar(); } );
        window.addEventListener("orientationchange", function(){ hideAddressBar(); } );
    }

    $('#fullscreen').click(function(){
       hideAddressBar();
       fullscreen = true;
    });
    $('#normalscreen').click(function(){
       showAddressBar();
       fullscreen = false;
    });

});
function hideAddressBar()
{
    document.body.style.height = (window.outerHeight + 20) + 'px';
    window.scrollTo(0, 1);
}
function showAddressBar()
{
    document.body.style.height = (window.outerHeight - 20) + 'px';
    window.scrollTo(0, 0);
}

Answer 1

You can find a good article on how this is achieved here http://mobile.tutsplus.com/tutorials/mobile-web-apps/remove-address-bar/

Sample script

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); }, 50 );
  }
}

window.addEventListener("load", function(){ if(!window.pageYOffset){ hideAddressBar(); } } );
window.addEventListener("orientationchange", hideAddressBar );