如何在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中完全隐藏导航栏

回答

相关问题