Cross-platform Method For Removing The Address Bar In A Mobile Web App

I am working on a mobile web app and am trying to remove the address bar. Its easy enough, unless the 's natural height is not tall enough to allow for scrolling. Try a

Solution 1:

This site also has a few other suggestions, but this no-nonsense, no-worry one is available in a github:gist and answers your question (pasted here for convenience):

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

As far as I can tell, the combination of extra height added to the page (which caused problems for you) and the scrollTo() statement make the address bar disappear.

From the same site the 'simplest' solution to hiding the address bar is using the scrollTo() method:

window.addEventListener("load", function() { window.scrollTo(0, 1); });

This will hide the address bar until the user scrolls.

This site places the same method inside a timeout function (the justification is not explained, but it claims the code doesn't work well without it):

// When ready...window.addEventListener("load",function() {
  // Set a timeout...setTimeout(function(){
    // Hide the address bar!window.scrollTo(0, 1);
  }, 0);
});

Solution 2:

I think the way it works is the address bar is hidden when the page wouldn't fit. So you want a page exactly the height of the window including the address bar, i.e. window.outerHeight, no?