如何隱藏iPhone上的地址欄？

我有一種簡單的問題：如何隱藏iPhone上的地址欄？如何隱藏iPhone上的地址欄？

我試過到目前爲止兩種不同的方法：

在頁面加載下一個像素招用javascript滾動

而下面的meta標籤：

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />

也這樣：

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

我完全困惑。任何建議將不勝感激！

PS：哦，我忘了一件非常重要的事情：網頁本身並不會溢出瀏覽器窗口，可能是1像素滾動技巧不起作用的原因。

不能使它更大，因爲對設計的命中事情，每個人都可以滾動，但這個頁面摺疊... :)

來源

2010-11-07 Peter Szabo

如果頁面沒有溢出瀏覽器視口，爲什麼不讓頁面體高一點，滾動到0,1隱藏地址欄，然後禁用滾動？ – Rengers 2010-11-07 19:07:44

如果應用程序是通過主屏幕上的書籤啓動的，則這些元標記只會起作用。更多信息：https：//developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index。html – xentek 2013-09-23 21:48:18

只要點擊這個我自己，如果地址欄沒有隱藏，原因可能只是頁面不夠長而無法滾動。

當

window.scrollTo(0,1)

被稱爲頁面必須比窗長，以便可以進行滾動事件。只有當滾動發生時，移動Safari纔會隱藏地址欄。

來源

2011-09-20 15:01:21 rob

這應該有更多的選票，你絕對發現關於頁面高度。如果沒有任何東西，就不能滾動！ – iamkeir 2012-04-16 12:30:07

要使其正確的高度，請參閱：http://stackoverflow.com/questions/5206811/hide-iphone-address-bar-with-100-height – poshaughnessy 2013-06-05 14:37:46

正在尋找'隱藏地址欄'不工作，但相反，這解決了我的問題'寬度= device_width'不起作用。 +1。 – P5Coder 2013-09-11 11:53:36

除非出現在最近的IOS版本已經改變，向下滾動絕招是，可靠地工作只有一個，我已經沒有任何問題與this version：

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() { 
    window.scrollTo(0, 1); 
}, 1000);

我不關心這個特定頁面的任何其他移動平臺，雖然，它是基於代理重定向...你可能想要更改正則表達式來專門檢查iPhone，例如用/iPhone/代替/mobile/。

來源

2010-11-07 10:52:14

這是一個只有iphone的微型網站。感謝您的建議尼克，會嘗試;-) – 2010-11-07 11:08:53

不，仍然沒有效果。但我認爲，我做錯了什麼。我附上你剛剛給我的代碼，用jQuery加載： – 2010-11-07 11:17:49

我知道這個線程開始年齡，但如果你來到這裏尋找答案，請嘗試：

setTimeout(function() { 
    window.scrollTo(0, 1); 
}, 1000);

如果使用jQuery，把在$(document).ready(); 的超時結束允許瀏覽器確定頁面的高度...

來源

2011-02-24 22:19:27 Mike

我覺得這個版本其實更好。它測試用戶是否已經開始滾動，這是我在移動項目中注意到的一個問題。

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function() { 
    if (!pageYOffset) window.scrollTo(0, 1); 
}, 1000);

來源

2011-05-27 07:26:28

時，該網站內容已準備就緒，而不是使用超時

addEventListener("load", function() { 
    window.scrollTo(1, 0); 
}, false);

來源

2012-01-05 16:17:48 herson

我知道這是舊的文章您可以運行的功能，但要回答這個問題，我覺得它永遠不會，除非內容來解決比觀察窗大。

這裏有一些代碼會隱藏負載，方向變化和touchstart上的URL（只有當你有一個持久隱藏的url，這是一個其他蠕蟲的整個 - 只要你使用touchstart不要，刪除腳本的那部分）。

if(!window.location.hash && window.addEventListener){ 
    window.addEventListener("load",function() { 
     setTimeout(function(){ 
      window.scrollTo(0, 0); 
     }, 0); 
    }); 
    window.addEventListener("orientationchange",function() { 
     setTimeout(function(){ 
      window.scrollTo(0, 0); 
     }, 0); 
    }); 
    window.addEventListener("touchstart",function() { 
     setTimeout(function(){ 
      window.scrollTo(0, 0); 
     }, 0); 
    }); 
}

來源

2012-03-08 23:36:19 foliomobshawn

<meta name="apple-mobile-web-app-capable" content="yes" />

iPhone Configuring Web Applications

來源

2012-03-30 12:07:32 Creatorus

不起作用 – 2012-11-20 13:25:09

這僅適用於用戶將網站加入書籤作爲主屏幕圖標。 – markquezada 2014-07-18 20:18:14

UPDATE：蘋果iOS中8 minimal-uiremoved支持，因此這不再是一個有用的答案:(

對於新的Google尋找到這：截至iOS 7.1有一個新的minimal-ui模式在移動Safari瀏覽器的工作原理：

minimal-ui

它是由設置在視口中minimal-ui屬性enabled：

<meta name="viewport" content="minimal-ui">

可以配合其他性能還可以使用它像這樣：

<meta name="viewport" content="width=device-width, minimal-ui">

值得注意的是，沒有最小內容長度要求，因爲有scrollTo破解。這個新模式有一個很好的概述here。（這就是上面圖片的來源。）他還列出了一些缺點。

唯一的官方文檔我能找到的，這是在Apple's iOS 7.1 release notes記：

的屬性，最小的UI，已經添加了對允許最小化的頂部和底部的酒吧視meta標籤的關鍵iPhone作爲頁面加載。在使用minimal-ui的頁面上時，輕敲頂部欄會將條帶拉回。重新點擊內容會再次解散它們。

例如，使用<meta name="viewport" content="width=1024, minimal-ui」>。

當然，因爲中的iOS 7.1及以上這隻作品，它的效用是有限的。

來源

2014-07-18 20:31:09 markquezada

這聽起來真的很好，直到你意識到[它在iOS 8中被刪除]（http://stackoverflow.com/q/24889100/1676444）:(在關聯的問題上，[Gajus解釋了'minimal-ui'的替代方案] （http://stackoverflow.com/a/26884561/1676444）可能會幫助一些人。 – Turnerj 2015-09-03 01:39:44

如果這些解決方案都不起作用，而且您遇到了我遇到的非常狹窄的問題，請參閱以下問題。

我在CSS

html{position: relative; height 100%; overflow: hidden;}

這個CSS適用修復到只有我的一個網頁有這個，所以我到該網頁的條件限制它，並在地址欄現在行爲正確地在所有其他頁面。

來源

2017-11-20 19:37:54

如何隱藏iPhone上的地址欄？

回答

相關問題