如何在iPhone/HTML5中完全隱藏導航欄

我真的很陌生，適用於手機的HTML5。我爲當前的應用使用jQuery Mobile，並且隱藏導航欄時遇到了一些問題。如何在iPhone/HTML5中完全隱藏導航欄

我發現這個網站：http://m.somethingborrowedmovie.warnerbros.com/。（我不粘貼這個鏈接來宣傳這部電影。）

我只是對這個HTML5網站感到驚訝。有沒有人有任何想法用於隱藏導航欄的方法？

菜單也做得很好。有沒有任何框架來構建這樣的應用程序？

2011-05-15 Luc

嘗試以下操作：

添加在HTML文件的head這meta標籤：

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

打開你的網站與iPhone上的Safari，並使用書籤功能將您的網站添加到主屏幕。
返回主屏幕並打開已加入書籤的網站。網址和狀態欄將會消失。

只要你只需要使用iPhone，你應該沒問題，這個解決方案。

此外，您在warnerbros.com網站上的示例使用Sencha touch framework。您可以撥打Google it或登錄check out their demos。

來源

2011-06-22 19:10:46

window.scrollTo解決方案更多地與設備無關。好的提示，Minh。 – jfroom 2012-05-10 19:44:26

@jfroom：這只是一個簡單的解決方法。你可以稱它爲小費或技巧，但它適用於tho :) – 2012-05-11 18:21:41

此解決方案不再適用於iOS7 Safari有關如何在iOS7中執行此操作的任何想法 – 2013-12-19 09:41:23

雷米夏普有過程的在他的文章"Doing it right: skipping the iPhone url bar"一個很好的說明：

使得iPhone隱藏地址欄是相當簡單的，你需要運行以下JavaScript：
window.scrollTo(0, 1);
但是有什麼時候的問題？你必須這樣做，一旦的高度是正確的，以便iPhone可以滾動到文件的第一個像素，否則它會嘗試，然後高度將加載，迫使的url欄回來查看。

你可以等到圖像已經加載，並且在window.onload 事件觸發，但這並不總是工作，如果一切都被緩存，事件觸發過早的scrollTo從未有機會跳。下面是使用的window.onload一個例子：http://jsbin.com/edifu4/4/

我個人使用計時器1秒 - 這是一個移動設備上有足夠的時間，你需要等待渲染，但足夠長的時間，它不會太早火：
setTimeout(function() { window.scrollTo(0, 1); }, 1000); 
但是，你只希望此設置，如果它是一個iPhone（或只是移動）瀏覽器，因此偷偷摸摸嗅（我一般不鼓勵這種，但我坦然面對這防止「正常」桌面瀏覽器跳過一個像素：
/mobile/i.test(navigator.userAgent) && setTimeout(function 
() { window.scrollTo(0, 1); }, 1000);
這樣做的最後一部分，這是似乎是從一些例子，我在網上看到周圍缺少的部分是這樣的：如果用戶專門鏈接到網址片段，即該網址有一個散列在它，你不想跳。所以，如果我瀏覽到 http://full-frontal.org/tickets#dayconf - 我希望瀏覽器自然滾動到ID爲dayconf的元素，並使用scrollTo不跳頂端（0,1）：
/mobile/i.test(navigator.userAgent) && !location.hash && 
setTimeout(function() { window.scrollTo(0, 1); }, 1000); 
嘗試了這一點上一個iPhone（或模擬器）http://jsbin.com/edifu4/10 ，你會發現它只會在你沒有url片段登陸頁面時滾動。

來源

2011-05-15 21:16:21 bnabilos

我無法與我的應用程序一起工作。看來我對我使用的map_canvas的大小有問題。在最好的情況下，我只有一半隱藏的導航欄。 – Luc 2011-05-18 22:04:56

僅當內容高度大於420點時才起作用。 – 2011-12-19 09:05:51

感謝這個偉大的答案，作品一種享受。我仍然想知道在問題中引用的網站如何整齊地保持地址欄即使滾動也是隱藏的。 – 2012-09-01 22:24:22

到目前爲止給出的所有答案的問題是，在借用的網站上，當滾動時，Mac欄仍然完全隱藏，如果您只是使用scrollTo解決方案，然後用戶向上滾動，則導航欄是再次顯示，似乎有整個網站內的一個div滾動，所以，而不是滾動頁面它只滾動內部的div和KEEPS導航欄隱藏。顯示導航欄的唯一方法是觸摸屏幕的頂部。

來源

2013-02-27 19:29:30 EmmaGamma

-1

簡單的JavaScript文檔導航到「＃」將做到這一點。

window.onload = function() 
{ 
document.location.href = "#"; 
}

這將強制導航欄在加載時自行移除。

來源

2014-06-26 14:25:30 yanike

如何在iPhone/HTML5中完全隱藏導航欄

回答

相關問題