How to hide a mobile browser's address bar?

Safari and Chrome on mobile devices both include a visible address bar when a page loads. As the body of the page scrolls, these browsers will scroll the address bar off screen to give more real estate to the website as shown in this image:

I'm running into a bit of an issue with my site allowing this. I'm working on a Pokedex that contains a very long list of all the Pokemon. However, with the way I've set up the page it doesn't want to scroll the address bar out of sight.

My html looks like:

<body>
  <app> <!-- My Angular2 tag for the app, no special styles for this -->
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap -->
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries -->
  </app>
</body>

If I scroll to the absolute bottom of the list (that's 721 entries) then any more scrolling will move the address bar off the top of the screen. If I touch the navbar and drag it upward then the address bar moves off screen. Both of these seem unintuitive ways to do this.

I imagine there's some way I scroll the body of the page using javascript that will hide it but what I've tried so far doesn't work. No visible scrolling took place when I did that.

How can I scroll the page enough to hide a mobile browser's address bar shortly after the page loads?

EDIT: The more I look into this, the more impossible it seems to do it without user interaction. If I require user interaction, would it be possible for a user's touch in the center of the screen to first attempt to scroll the body before attempting to scroll the div with all the entries in it? If this works the way I'm thinking then it would first slide the address bar out of the way before sliding through the list. It's kind of the reverse of the default browser behavior so it may not be possible/easy/reliable, but I'm willing to try and see if anybody has any ideas.

I know this is old, but I have to add this in here..

And while this is not a full answer, it is an 'IN ADDITION TO'

The address bar will not disappear if you're NOT using https.

ALSO

If you are using https and the address bar still won't hide, you might have some https errors in your webpage (such as certain images being served from a non-https location.)

Hope this helps..

Have a look at this HTML5 rocks post - http://www.html5rocks.com/en/mobile/fullscreen/ basically you can use JS, or the Fullscreen API (better option IMO) or add some metadata to the head to indicate that the page is a webapp

This should be the code you need to hide the address bar:

window.addEventListener("load",function() {
    setTimeout(function(){
        // This hides the address bar:
        window.scrollTo(0, 1);
    }, 0);
});

Also nice looking Pokedex by the way! Hope this helps!

The easiest way to archive browser address bar hiding on page scroll is to add "display": "standalone", to manifest.json file.

来源：https://stackoverflow.com/questions/37395561/how-to-hide-a-mobile-browsers-address-bar

标签

javascript

mobile-browser

address-bar