Cross-platform method for removing the address bar in a mobile web app

javascript jquery android web-applications mobile-safari

16,905

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

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

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?

16,905

Author by

Fresheyeball

Principled user interface person, professional Haskell engineer, verification/usability driven developer, and proponent of the directed acyclic graph.

Updated on June 20, 2022

Comments

Fresheyeball almost 2 years
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.
Fresheyeball about 12 years

I am looking for the available height of the page MINUS the address bar. Otherwise $(window).height() would work fine.
נשמה קשוחה about 12 years

Hm, but how does that help with hiding the address bar?
Fresheyeball about 12 years

the last code block addresses this challenge. But it addresses it with +50. How do we know that the address bar is 50px high, in all instances?
Fresheyeball about 12 years

Because some pages have very little content. So the page may only be 20px high naturally. So scrolling to the top does nothing. The only way to get rid of the address bar is to style the page to be tall enough that scrolling to the top will remove it. Finding that height is the problem.
Fresheyeball about 12 years

You get an upvote for being the first person to actually provide a solution.
ramblinjan about 12 years

The 50px is more or less arbitrary, I believe. The scrollTo(0, 1) statement makes it so this extra amount doesn't simply create the same problem you're encountering when you set the height too large. It's the combination of the two that makes it work in all cases, as far as I can tell.
ramblinjan about 12 years

I changed the structure of my answer to place the final code block at the start, since as far as I can tell it is the best solution.
Fresheyeball about 12 years

I'm sorry but that is not good enough. scrollTo(0, 1) does not work if the page is too short, and simply arbitrarily adding 50px to the window to get rid of the address bar is not accurate. The address bar may be only 45px and there by leave an excess of 5px. Or the viewport might be huge like 1000px wide so the address bar may then be 200px high leaving the page way to short.
Fresheyeball about 12 years

That solution may work in may standard scenarios, but it wont account for the fragmentation of address bars on android devices or windows phone devices, or various viewports.
ramblinjan about 12 years

I think it actually includes the entire window space (including what the address bar takes up) and the 50px actually just makes sure it is slightly larger than the entire viewport: developer.mozilla.org/en/DOM/window.outerHeight
Fresheyeball about 12 years

In that case window.outerHeight would be the correct answer alone. Let me try that.
נשמה קשוחה about 12 years

That height is the window's outerHeight..... And by scrolling to the top, you mean bottom, right? Maybe you want to increase the page height, but really you should just set it instead.
נשמה קשוחה about 12 years

This answer contains invalid JavaScript (browsers may tolerate it, but still). Event listeners take an event parameter, for example. And what is scrollTo(0,1)? Is that 1 pixel completely arbitrary and unnecessary or do you have a reason for using it? And you really don't need the setTimeouts, they will only cause the page to jump after loading
Fresheyeball about 12 years

scrollTo is the same as window.scrollTo
נשמה קשוחה about 12 years

Yeah, but why scroll by 1 pixel?
Fresheyeball about 12 years

@PéterVarga the reason for the 1 is that iOS doesn't like 0,0 no logical reason why.
Fresheyeball about 12 years

@PéterVarga the 1 is vertical not horizontal.
ramblinjan about 12 years

Perhaps it is necessary to ensure overall compatibility or is simply necessary for their specific implementation? At any rate, I'm glad it works.
Christian over 11 years

setTimeout(fn, 0) will fail, always. The time parameter cannot be 0.
Vitim.us over 10 years

orientationchange is quite wrong, if the user is reading on the middle of the page and change orientation the page will suddenly jump to top, and it is quite frustrating that many websites do this just for the sake of hiding the address bar. Also a lot of times I start scrolling the page before the page is fully loaded, so when the page is ready it jumps back to the top, and it is very annoying. Another thing is that you should scroll it back to Y = 0 after hiding the address bar. gist.github.com/victornpb/7736786
ramblinjan over 10 years

@Vitim.us If you have a better option, you should submit it as an answer. If it's just an improvement to this one, submit an edit request.