hide mobile browser address bar on chrome (android)

问题

We have a site, where with a simple JavaScript

<body onLoad="setTimeout(function() {window.scrollTo(0, 1)}, 100);">

We hide the address bar on most browsers (safari, and the native android browser) this line of JavaScript works fine for most, but we have noticed a strange behavior on chrome, the page indeed scroll down, but the address bar doesn't hide! After the loading of the page, if the user scrolls down a little bit with the finger, the address bar hides normally.

I have also tried to scroll down all the page with the JS, with the result of the page full scrolled, and the address bar is still visible...

Anyone knows if there is some trick I forgot to use, or if this function is simply not present in Chrome?

回答1:

scrollTo(0,1) is not yet supported in Chrome for Android (it was recently added and then removed). We do have the FullScreen API but that is a little heavy handed for what you want to achieve.

回答2:

Seems that the latest update of Chrome Mobile (July 22) broke the toolbar auto-hide feature. When scrolling down a page, the toolbar no longer auto-hides. This was the case on my Nexus 4.

July 22 update brings full screen mode for tablets. But i guess they accidentally broke the feature for smartphones. Full screen mode was working previously on smartphones.

Chrome Browser Play Store

回答3:

I found the way how to hide address bar after first click

if (document.body.webkitRequestFullScreen) {
  window.addEventListener('click', function(e) {
    if (e.target.type != 'text' && e.target.type != 'password') {
      body.webkitRequestFullScreen();
      window.setTimeout(function() {
        document.webkitCancelFullScreen();
      }, 500);
    }
  }, false);
}

来源：https://stackoverflow.com/questions/17791705/hide-mobile-browser-address-bar-on-chrome-android

标签

android

google-chrome

browser

hide

address-bar