Html 如何在 iPhone / HTML5 中完全隐藏导航栏

How to completely hide the navigation bar in iPhone / HTML5

提问by Luc

I'm really new to HTML5 for mobile. I use jQuery Mobile for my current app and I have some problems hiding the navigation bar.

我对移动版 HTML5 真的很陌生。我将 jQuery Mobile 用于我当前的应用程序，但在隐藏导航栏时遇到了一些问题。

I found this site: http://m.somethingborrowedmovie.warnerbros.com/. (I do not paste this link to promote the movie.)

我找到了这个网站：http: //m.somethingborrowedmovie.warnerbros.com/。（我不会粘贴此链接来宣传这部电影。）

I was just amazed by this HTML5 site. Does anyone have any idea of the method used to hide the navigation bar?

我只是对这个 HTML5 网站感到惊讶。有没有人知道用于隐藏导航栏的方法？

The menu is also really well done. Is there any framework to build apps like this one?

菜单也做得很好。有没有任何框架可以构建这样的应用程序？

回答by Minh Le

Try the following:

请尝试以下操作：

1. Add this metatag in the headof your HTML file:

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

2. Open your site with Safari on iPhone, and use the bookmark feature to add your site to the home screen.

3. Go back to home screen and open the bookmarked site. The URL and status bar will be gone.

1. meta在head您的 HTML 文件的 中添加此标记：

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

2. 在 iPhone 上使用 Safari 打开您的网站，然后使用书签功能将您的网站添加到主屏幕。

3. 返回主屏幕并打开书签站点。URL 和状态栏将消失。

As long as you only need to work with the iPhone, you should be fine with this solution.

只要您只需要使用 iPhone，就可以使用此解决方案。

In addition, your sample on the warnerbros.com site uses the Sencha touch framework. You can Google itfor more information or check out their demos.

此外，warnerbros.com 站点上的示例使用Sencha 触摸框架。你可以谷歌它以获取更多信息或查看他们的演示。

回答by bnabilos

Remy Sharp has a good description of the process in his article "Doing it right: skipping the iPhone url bar":

Remy Sharp 在他的文章“Doing it right: skipping the iPhone url bar”中对这个过程有很好的描述：

Making the iPhone hide the url bar is fairly simple, you need run the following JavaScript:

window.scrollTo(0, 1); 

However there's the question of when? You have to do this once the height is correct so that the iPhone can scroll to the first pixel of the document, otherwise it will try, then the height will load forcing the url bar back in to view.

You could wait until the images have loaded and the window.onload event fires, but this doesn't always work, if everything is cached, the event fires too early and the scrollTo never has a chance to jump. Here's an example using window.onload: http://jsbin.com/edifu4/4/

I personally use a timer for 1 second - which is enough time on a mobile device while you wait to render, but long enough that it doesn't fire too early:

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

However, you only want this to setup if it's an iPhone (or just mobile) browser, so a sneaky sniff (I don't generally encourage this, but I'm comfortable with this to prevent "normal" desktop browsers from jumping one pixel):

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

The very last part of this, and this is the part that seems to be missing from some examples I've seen around the web is this: if the user specifically linked to a url fragment, i.e. the url has a hash on it, you don't want to jump. So if I navigate to http://full-frontal.org/tickets#dayconf- I want the browser to scroll naturally to the element whose id is dayconf, and not jump to the top using scrollTo(0, 1):

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

Try this out on an iPhone (or simulator) http://jsbin.com/edifu4/10and you'll see it will only scroll when you've landed on the page without a url fragment.

让 iPhone 隐藏 url 栏相当简单，你需要运行以下 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); 

最后一部分，这是我在网上看到的一些例子中似乎缺少的部分是：如果用户专门链接到一个 url 片段，即 url 上有一个哈希，你不想跳。因此，如果我导航到 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 片段的页面时滚动。

回答by EmmaGamma

The problem with all of the answers given so far is that on the something borrowed site, the Mac bar remains totally hidden when scrolling up, if you just use the scrollTo solution and then the user scrolls up, the nav bar is revealed again, it seems that to have the whole site inside of a div with scrolling on so that instead of scrolling the page it only scrolls inside the div and KEEPS the nav bar hidden. The only way to reveal the nav bar is to touch the top of the screen.

到目前为止给出的所有答案的问题是，在借用的网站上，向上滚动时 Mac 栏保持完全隐藏，如果您只使用 scrollTo 解决方案，然后用户向上滚动，导航栏将再次显示，它似乎将整个网站放在一个 div 内并滚动，这样它就不会滚动页面，而是只在 div 内滚动并隐藏导航栏。显示导航栏的唯一方法是触摸屏幕顶部。

回答by yanike

Simple javascript document navigation to "#" will do it.

简单的javascript文档导航到“#”就可以了。

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

This will force the navigation bar to remove itself on load.

这将强制导航栏在加载时自行移除。