以橫向模式在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地址欄

回答

相關問題