How to hide a mobile browser's address bar?

Question

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.

You can try `window.onload=function(){ setTimeout(function(){ window.scrollTo(0, 1); }, 0); }` but for latest browsers, I will suggest `Full screen api` — Rayon, May 23 '16 at 16:02
You might get better answers if you post the skeleton code of your setup, including CSS and the JS scrolling that you’ve tried. — Michael Schmid, Sep 16 '20 at 09:19
It's December 2021 and I just downvoted all the 8 answers in this question. It's still an open question guys. :) — Aidin, Dec 05 '21 at 18:25

score 33 · Answer 1 · answered Jun 24 '18 at 04:12

33

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..

answered Jun 24 '18 at 04:12

Tony

373
3
2

11

great, and how would you get rid of the bar tho? – Mr-Programs Oct 19 '18 at 05:14
1

Pin it to your phone's home screen and click on the pinned app. – Jack Jan 05 '20 at 02:33
9

I know it's 2 years late to be asking followup questions but do you have a reference for the statement that the "address bar will not disappear if you're NOT using https"? It doesn't sound unreasonable but I can't find anything from Goolge, Apple or Firefox about this behavior. – George Hawkins Mar 22 '20 at 21:51
1

@GeorgeHawkins I also haven't been able to prove that its true. – Trever Thompson Nov 02 '20 at 02:30
2

Downvoted. Not an answer as you mentioned. You could leave it as a comment. Also, in the best case, you are saying why the default behavior doesn't work. The question is about how to do something on top of the default behavior, which is programmatically hide the URL bar. – Aidin Dec 05 '21 at 18:23
This is simply not true! – Jeshurun Hembd Mar 09 '22 at 01:37
1

reproduced the described behavior on a docker container, prod version with valid cert, hides the bar as expected, dev instance with invalid cert, doesn't hide the address bar – Camilo Casadiego Apr 10 '23 at 23:21

score 17 · Answer 2 · answered May 23 '16 at 16:16

17

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

answered May 23 '16 at 16:16

Ant Kennedy

1,230
7
13

1

I've added the meta tags and now the app looks/works great when I save the website to my desktop but I can't get the full screen API to work on load. It probably requires user interaction to do that. – Corey Ogburn May 23 '16 at 18:35
3

Yeah, on my PC I get this in the console: `Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture.` – Corey Ogburn May 23 '16 at 18:36
2

@CoreyOgburn: You cannot force your webpage to display in fullscreen mode for security reasons. User interaction is required for that. – Nishal K.R Nov 01 '19 at 07:57
6

That URL is now a 404 error – Trade-Ideas Philip Apr 09 '23 at 17:28

score 8 · Answer 3 · answered May 23 '16 at 16:12

8

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!

answered May 23 '16 at 16:12

NiallMitch14

1,198
1
12
28

3

This did not work for me on my Nexus 6 running the latest Android N. I don't have an iPhone to test with. This may be because I'm using Angular2. The window may fire the load event before all the AJAX requests getting the pokemon data come back. If that happens the document height may not be filled in. I've tried calling this after those AJAX requests and it still didn't work. – Corey Ogburn May 23 '16 at 18:24
7

Neither on Chrome on Android 7. It scrolls, yes, but the address bar still visible – Zander Nov 03 '17 at 07:13
> Caution: I am telling you this as a friend. It exists. It is a thing, but it is a hack. Please don't use it. — Paul From this Google article https://developers.google.com/web/fundamentals/native-hardware/fullscreen/ – Ed Prince May 18 '18 at 13:06
That code was copy-pasted from here: https://davidwalsh.name/hide-address-bar - apparently it worked a few years ago – Philipp May 23 '20 at 18:10
doesn't look like a copy-paste to me, more simply, this trick was all over the web in the 10s. and yes it used to work – wlf Jul 27 '21 at 23:33
Downvoted. Doesn't work anymore in December 2021. Neither on iOS, nor on Chrome. – Aidin Dec 05 '21 at 18:24

score 8 · Answer 4 · answered Dec 08 '19 at 07:39

8

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.

answered Dec 08 '19 at 07:39

Oleg

1,044
1
14
10

Downvoted. You just mentioned why the default behavior wasn't working for your case. It doesn't answer the question, which is how to something on top of the default behavior (i.e. how to programmatically minimize the url-bar). – Aidin Dec 05 '21 at 18:19
In my case the problem was that the `display: fixed` prevented the address bar of the mobile browser from being hidden, changing it to `display: absolute` solved the problem – Diego Lope Loyola May 20 '22 at 14:13
Upvoted. Literally the only answer that has worked for me. – nionios Apr 20 '23 at 11:00

score 4 · Answer 5 · answered Oct 21 '18 at 09:28

4

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

answered Oct 21 '18 at 09:28

Mārcis P

316
3
10

1

I wish I could do this for people who don't add the site to their home screen but for those that do this will really spruce up their experience. I was so excited about it, I implemented it this morning. – Corey Ogburn Oct 22 '18 at 16:24
4

if I add the website on the home screen then it works. But if I don't do that the address bar is not hiding in my case. – MD. IBRAHIM KHALIL TANIM Jan 12 '20 at 17:21

score 4 · Answer 6 · answered Aug 30 '20 at 19:31

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>

score 0 · Answer 7 · answered Jan 09 '21 at 11:07

0

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
}

answered Jan 09 '21 at 11:07

developerjavad

315
1
2
10

9

explanation? is there a specific entry in the manifest that is supposed to solve the issue?? – knarf May 24 '21 at 14:43
https://developer.mozilla.org/en-US/docs/Web/Manifest @knarf – Karthikeyan Aug 24 '21 at 02:23
1

@Karthikeyan thanks, but what was it about the manifest, or what specifically within the manifest, is solving the issue? – knarf Aug 25 '21 at 16:42
@Knarf: "display": "standalone" instructs the browser to hide the browser controls to give a native app experience. But this happen when the user adds your app to their home screen. – MMH Aug 31 '21 at 16:09
@knarf hope this helps https://web.dev/add-manifest/ – Karthikeyan Sep 01 '21 at 06:59
1

If this is still unclear: Linking a manifest.json transforms this into a PWA: https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps One applicable benefit of PWAs is that it allows you to specify the browser decoration, like the display: key used in the example. You can btw trim this example vastly. You can start with an empty manifest and check with either the google chrome console or Lighthouse what's missing to get a PWA to work. – TobTobXX Nov 11 '21 at 21:14
please change or remove the gcm sender ID, otherwise the author of the answer will spam your users with push notifications :) – Szántó Zoltán May 12 '22 at 12:05

Dung Nguyen · Answer 8 · 2020-12-25T09:30:42.590

-4

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!

edited Dec 25 '20 at 09:30

answered Dec 25 '20 at 06:41

Dung Nguyen

181
1
5

Doesn't work. 1) Hide when scroll is the default behavior. 2) The question is how to hide without scroll. 3) The above one makes the height of body to be ICB (read the doc you linked) regardless of the URL bar being visible or not. – Aidin Dec 05 '21 at 18:13

How to hide a mobile browser's address bar?

8 Answers8

Linked

Related