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    lt body gt     lt app gt   lt  -- My Angular2 tag for the app  no special styles for this -- gt       lt nav gt     lt  nav gt   lt  -- The red nav bar and hamburger menu  default bootstrap -- gt       lt div class  fluid-container  gt     lt  div gt   lt  -- The container for all pokemon entries -- gt     lt  app gt   lt  body gt    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

User · Answer

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

User · Answer

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

User · Answer

create host file   manifest json html tag head  lt link rel  quot manifest quot  href  quot  manifest json quot  gt   file manifest json    quot name quot    quot news quot    quot short name quot    quot news quot    quot description quot    quot des news application day quot    quot categories quot      quot news quot    quot business quot      quot theme color quot    quot  ffffff quot    quot background color quot    quot  ffffff quot    quot display quot    quot standalone quot    quot orientation quot    quot natural quot    quot lang quot    quot fa quot    quot dir quot    quot rtl quot    quot start url quot    quot   application true quot    quot gcm sender id quot    quot 482941778795 quot    quot DO NOT CHANGE GCM SENDER ID quot    quot Do not change the GCM Sender ID quot    quot icons quot        quot src quot    quot https   s100 divarcdn com static thewall-assets android-chrome-192x192 png quot    quot sizes quot    quot 192x192 quot    quot type quot    quot image png quot        quot src quot    quot https   s100 divarcdn com static thewall-assets android-chrome-512x512 png quot    quot sizes quot    quot 512x512 quot    quot type quot    quot image png quot        quot related applications quot        quot platform quot    quot play quot    quot url quot    quot https   play google com store apps details id ir divar quot        quot prefer related applications quot   true

User · Answer

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

User · Answer

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

User · Answer

You can go to fullscreen when user allows it     lt button id  quot goFS quot  gt Go fullscreen lt  button gt   lt script gt    var goFS   document getElementById  quot goFS quot      goFS addEventListener  quot click quot   function               const elem   document documentElement     if  elem requestFullscreen   elem requestFullscreen             false    lt  script gt

User · Answer

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

User · Answer

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

[javascript] How to hide a mobile browser's address bar?

Examples related to javascript

Examples related to mobile-browser

Examples related to address-bar