Home/ Questions/Q 7731277
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-01T06:26:26+00:00

I am working on a mobile web app and am trying to remove the

  • 0

I am working on a mobile web app and am trying to remove the address bar. Its easy enough, unless the <body>‘s natural height is not tall enough to allow for scrolling. Try as I might I cannot find a reliable iphone/android, cross device method of insuring that the <body> is tall enough to allow the address bar to disappear. Many of the methods I’ve seen rely on screen.height which makes the page TALLER than it needs to be. It should be EXACTLY tall enough to allow the address bar to go away and no taller!

Does anyone have a script that handles this perfectly? I all I need to to determine the height of the page minus the address bar for iphone and android.

I’ve tried:

screen.height //too tall
window.innerHeight //too short
document.documentElement.clientHeight //too short
document.body.clientHeight //almost but too short

JQUERY allowed.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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):

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

    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);
});
    • 0