如何隱藏手機瀏覽器的地址欄？

移動設備上的Safari和Chrome瀏覽器在加載頁面時都包含可見的地址欄。隨着頁面滾動的body，這些瀏覽器將滾動地址欄屏幕外給予更多的房地產網站如本圖所示：如何隱藏手機瀏覽器的地址欄？

我遇到一個有點問題與我的網站允許這一點。我正在製作一個包含所有寵物小精靈長列表的Pokedex。但是，通過我設置頁面的方式，它不想將地址欄滾動到視線之外。

我的HTML看起來像：

<body> 
    <app> <!-- My Angular2 tag for the app, no special styles for this --> 
    <nav>...</nav> <!-- The red nav bar and hamburger menu, default bootstrap --> 
    <div class="fluid-container">...</div> <!-- The container for all pokemon entries --> 
    </app> 
</body>

如果我滾動到列表的絕對底部（這是721項），然後再滾動將移動地址欄關閉的頂部屏幕。如果我觸摸導航欄並向上拖動，則地址欄會移出屏幕。這兩個看起來都很不直觀。

我想有一種方法，我使用javascript來滾動頁面的主體，它會隱藏它，但what I've tried so far不起作用。當我這樣做時，沒有可見的滾動發生。

如何在頁面加載後不久滾動頁面以隱藏移動瀏覽器的地址欄？

編輯：我越看這，越不可能它似乎沒有用戶的交互。如果我需要用戶交互，用戶在屏幕中心的觸摸可能首先嚐試滾動主體，然後嘗試滾動其中的所有條目的div。如果這種方式符合我的想法，那麼在滑動列表之前，它會首先滑動地址欄。這與默認瀏覽器行爲相反，因此它可能不可行/容易/可靠，但我願意嘗試查看是否有人有任何想法。

來源

2016-05-23 Corey Ogburn

你可以試試'window.onload = function（）{setTimeout（function（）{ \t \t window.scrollTo（0,1）; \t}，0）; }'但對於最新的瀏覽器，我會建議'全屏api' – Rayon

請參閱http://www.html5rocks.com/en/mobile/fullscreen/ – Rayon

這應該是你需要隱藏地址欄的代碼：

window.addEventListener("load",function() { 
    setTimeout(function(){ 
     // This hides the address bar: 
     window.scrollTo(0, 1); 
    }, 0); 
});

也不錯，順便找圖鑑！希望這可以幫助！

來源

2016-05-23 16:12:48 NiallMitch14

這對我而言並不適用於運行最新Android N的Nexus 6。我沒有iPhone來測試。這可能是因爲我在使用Angular2。在所有獲取小精靈數據的AJAX請求返回之前，該窗口可以觸發加載事件。如果發生這種情況，文檔高度可能無法填充。我試過在AJAX請求後調用它，但它仍然無效。 –

在iPhone 6上無法正常工作 –

無法在iOS 10上正常工作。 –

看一看這個HTML5岩石後 - http://www.html5rocks.com/en/mobile/fullscreen/基本上可以用JS或全屏API（更好的選擇IMO），或添加一些元數據的頭，表示該頁面是一個Web應用程序

來源

2016-05-23 16:16:36

我添加了meta標籤，現在應用看起來/當我將網站保存到我的桌面時效果很好，但我無法獲得全屏API來加載。它可能需要用戶交互才能做到這一點。 –

是的，在我的電腦上，我在控制檯中得到了這個：''Element'上執行'requestFullScreen'失敗：API只能由用戶手勢啓動.' –

如何隱藏手機瀏覽器的地址欄？

回答

相關問題