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

使用JavaScript，如何在横向模式下滚动浏览URL地址栏。在纵向模式下，您只需执行window.scrollTo（0,1），该模式可以工作，但不能在横向模式下工作。它在URL栏中部分显示。以横向模式在Android上隐藏URL地址栏

有什么建议吗？

2012-03-22 Scott Deutsch

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

有一点需要注意的是，手机浏览器需要有一些内容滚动。通过内容滚动我的意思是页面中的内容需要高于窗口高度。如果不是，它不会向下滚动。

选项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)

1选项
转到这个，如果你不知道，如果你的内容更多的则是窗口的高度。

<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两个方向上对此进行了测试。

来源

2012-03-22 04:28:37 porseland

Thanks ALOT！第二个解决方案帮助了我。 – 2012-03-22 21:01:37

如果您使用CSS翻译将您的内容缩放到屏幕的大小，您会做什么？ – Michael 2013-04-23 23:07:05

这不适用于Android的Firefox移动版 – Michael 2013-04-24 04:11:38

这是对我工作：

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;

来源

2017-09-14 12:11:31 user2718671

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

回答

相关问题