Menu
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.
814
To get started enter “about:flags” into the Address Bar and hit Enter. Scroll down until you see the listing for Compact Navigation. Enable it and let the browser restart to gain access to the feature. Once the browser has restarted right click on one of the tabs and select Hide the toolbar from the Context Menu.
Here's how it works: Open Settings, then open Apps. In the All apps list, find Google app, or just Google, tap it and select disable. Reboot your phone and the Search bar should be gone!
Pressing the F11 key or using the Zoom feature on Google Chrome can help you hide the address bar on Chrome.
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..
163
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
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
