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.
This question is related to
javascript
mobile-browser
address-bar
The answer is
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
In my case problem was in css and html layout.
Layout was something like html - body - root - ...
html and body was overflow: hidden, and root was position: fixed, height: 100vh.
Whith this layout browser tabs on mobile doesnt hide.
For solve this I delete overflow: hidden from html and body and delete position: fixed, height: 100vh from root.
The easiest way to archive browser address bar hiding on page scroll is to add "display": "standalone", to manifest.json file.
In chrome lastest. Add following css it auto hide address bar (URL bar) when scroll!
html { height: 100vh; }
body { height: 100%; }
And this is why: https://developers.google.com/web/updates/2016/12/url-bar-resizing
Hope to helpful!
You can go to fullscreen when user allows it :)
<button id="goFS">Go fullscreen</button>
<script>
var goFS = document.getElementById("goFS");
goFS.addEventListener("click", function() {
const elem = document.documentElement;
if (elem.requestFullscreen) {elem.requestFullscreen()}
}, false);
</script>
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..
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!
create host file = manifest.json
html tag head
<link rel="manifest" href="/manifest.json">
file
manifest.json
{
"name": "news",
"short_name": "news",
"description": "des news application day",
"categories": [
"news",
"business"
],
"theme_color": "#ffffff",
"background_color": "#ffffff",
"display": "standalone",
"orientation": "natural",
"lang": "fa",
"dir": "rtl",
"start_url": "/?application=true",
"gcm_sender_id": "482941778795",
"DO_NOT_CHANGE_GCM_SENDER_ID": "Do not change the GCM Sender ID",
"icons": [
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "https://s100.divarcdn.com/static/thewall-assets/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"related_applications": [
{
"platform": "play",
"url": "https://play.google.com/store/apps/details?id=ir.divar"
}
],
"prefer_related_applications": true
}
Source: Stackoverflow.com