我是移动HTML5的新手。我使用jQuery Mobile作为我当前的应用程序，我在隐藏导航栏时遇到了一些问题。
我找到了这个网站：http://m.somethingborrowedmovie.warnerbros.com/。 （我不粘贴此链接来宣传电影。）
我对这个HTML5网站感到惊讶。有没有人知道用于隐藏导航栏的方法？
菜单也做得很好。是否有任何框架来构建这样的应用程序？
答案 0 :(得分：58)
尝试以下方法：
在HTML文件的meta中添加此head标记：
<meta name="apple-mobile-web-app-capable" content="yes" />
在iPhone上使用Safari打开您的网站，并使用书签功能将您的网站添加到主屏幕。
返回主屏幕并打开已添加书签的网站。 URL和状态栏将消失。
只要您只需要使用iPhone，就可以使用此解决方案。
此外，您在warnerbros.com网站上的示例使用Sencha touch framework。您可以Google it获取更多信息，或check out their demos。
答案 1 :(得分：33)
Remy Sharp在他的文章"Doing it right: skipping the iPhone url bar"中对该过程有一个很好的描述：
让iPhone隐藏网址栏相当简单，你需要运行 以下JavaScript：
window.scrollTo(0, 1);
然而，问题何时？你必须这样做一次 高度是正确的，以便iPhone可以滚动到第一个像素 文件，否则会尝试，然后高度将加载强制 网址栏回来查看。
您可以等到图片已加载并加载window.onload 事件触发，但如果一切都被缓存，这并不总是有效， 事件发生得太早，滚动从来没有机会跳跃。 以下是使用window.onload的示例：http://jsbin.com/edifu4/4/
我个人使用计时器1秒 - 这是足够的时间 移动设备在等待渲染时，但足够长 不会太早开火：
setTimeout(function () { window.scrollTo(0, 1); }, 1000);然而，如果它是iPhone（或者仅仅是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上试用一下 并且你会看到它只会在你登陆页面时滚动 没有网址片段。
答案 2 :(得分：1)
到目前为止给出的所有答案的问题是，在借用的网站上，当向上滚动时，Mac栏仍然完全隐藏，如果您只是使用scrollTo解决方案，然后用户向上滚动，导航栏就会显示再次，看起来整个网站都在div内部滚动，这样它就不会滚动页面而只会在div内部滚动并隐藏导航栏的KEEPS。显示导航栏的唯一方法是触摸屏幕顶部。
答案 3 :(得分：-2)
简单的javascript文档导航到“＃”就可以了。
window.onload = function()
{
document.location.href = "#";
}
这将强制导航栏在加载时自行移除。