在横向模式下隐藏Android上的URL地址栏

Question

使用JavaScript，如何在横向模式下滚动浏览URL栏。在纵向模式下，您只需执行window.scrollTo（0,1）即可，但不能在横向模式下使用。它在URL栏上分道扬..

有关尝试什么的任何建议？

Answer 1

有两种方法可以做到这一点。取决于您显示的页面类型。

需要注意的一点是，移动浏览器需要有一些内容才能滚动。按内容滚动我的意思是页面中的内容需要高于窗口高度。如果不是，它根本不会向下滚动。

的选项1
如果您知道页面内容超过窗口高度，请执行此操作。

    (function removeAddressBar(){
         // Make sure it really scrolls down.
         window.scrollTo(0, 10);

         // Set a timeout to check that it has scrolled down.
         setTimeout(function() { 
              if(window.scrollY == 0) { 
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   //launch();
              }
         }, 500);
    })(this)

<强>选项2
如果您不知道您的内容是否超过窗口高度，请选择此项。

    <div id='scroller' style='position:absolute;height:2000px;'></div>

    (function removeAddressBar(){
         window.scrollTo(0, 10);
         setTimeout(function() { 
              if(window.scrollY == 0) {
                   removeAddressBar();
              }else{
                   window.scrollTo(0, 1);
                   document.getElementById('scroller').style.height = window.innerHeight+'px';
                   //launch();
              }
         }, 500);
    })(this)

对于这么简单的事情，这可能看起来很多。但我认为这是迄今为止最可靠的方式..我已经在iOS和Android上测试了这两种方向。

Answer 2

这对我有用：

window.screen.orientation.onchange = function() {
      if (this.type.startsWith('landscape')) {
        document.querySelector('#container').webkitRequestFullscreen();
      } else {
        document.webkitExitFullscreen();
      }
};

在此处找到该代码段： https://mounirlamouri.github.io/sandbox/fullscreen-orientation.html 这适用于Android Chrome浏览器。

似乎该脚本会在IOS设备上引发错误，因为它们不支持Fullscreen API。因此，该函数应该包含在if语句中，以检查它是否是IOS设备：

var iOS = /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;