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

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

我找到了这个网站：。（我粘贴此链接不是为了宣传电影。）

我对这个HTML5网站感到惊讶。有人知道隐藏导航栏的方法吗

---

菜单也做得很好。有什么框架可以构建这样的应用程序吗？

雷米·夏普在他的文章中很好地描述了这个过程：

让iPhone隐藏url栏相当简单，您需要运行 以下JavaScript：

window.scrollTo(0, 1); 

但问题是什么时候？你必须每天做一次 高度正确，因此iPhone可以滚动到屏幕的第一个像素 文档，否则将尝试，然后高度将加载强制 返回url栏以查看

您可以等待图像加载完毕，然后单击window.onload 事件激发，但这并不总是有效，如果所有内容都已缓存， 事件触发太早，卷轴永远没有跳转的机会。 下面是一个使用window.onload的示例：

我个人用计时器计时1秒，这在一个小时内就足够了 移动设备等待渲染时，但时间足够长 不要过早开火：

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

但是，您只希望在它是iPhone（或 手机）浏览器，所以偷偷摸摸（我一般不鼓励这样做， 但我很乐意这样做，以防止“正常”的桌面浏览器 从跳跃一个像素开始）：

这是最后一部分，这一部分似乎是 我在网上看到的一些例子中遗漏了以下内容：如果 特定链接到url片段的用户，即url上有一个哈希 它，你不想跳。所以如果我导航到 -我想让浏览器滚动 很自然地，它将返回到id为dayconf的元素，而不是跳转到顶部 使用scrollTo（0，1）：

在iPhone（或模拟器）上试用 你会看到它只会在你登陆页面时滚动 没有url片段

请尝试以下操作：

将此

meta

标记添加到HTML文件的

head

中：

使用iPhone上的Safari打开您的网站，并使用书签功能将您的网站添加到主屏幕

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

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

---

此外，您在warnerbros.com网站上的示例使用。您可以查看更多信息或。

到目前为止给出的所有答案的问题是，在“借来的东西”网站上，当向上滚动时，Mac栏仍然完全隐藏，而提供的答案无法做到这一点

如果您只是使用

scrollTo

，然后用户随后向上滚动，导航栏将再次显示，因此您似乎必须将整个站点放在一个div内，并强制在该div内进行滚动，而不是在主体上进行滚动，从而在任何方向滚动期间保持导航栏隐藏

---

但是，在apple设备上，您仍然可以通过触摸屏幕顶部附近的位置来显示导航栏。

简单的javascript文档导航到“#”即可

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

---

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

我的应用程序无法使用此功能。我似乎对我使用的地图画布的大小有问题。在最好的情况下，我只有一半隐藏的导航栏。只有当内容高度大于420点时，它才起作用。感谢这个伟大的答案，非常有用。我仍然想知道，问题中引用的站点是如何如此整洁地隐藏地址栏的，即使是滚动。window.scrollTo解决方案更不依赖于设备。明，这是一个很好的提示。@jfroom:这只是解决这个问题的一个简单方法。您可以称之为提示或技巧，但它在以下情况下起作用：）此解决方案在iOS7 Safari中不再起作用。您对如何在iOS7中实现它有何想法

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

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