我对移动版 HTML5 真的很陌生。我将 jQuery Mobile 用于我当前的应用程序，但在隐藏导航栏时遇到了一些问题。
我找到了这个网站： http: //m.somethingborrowedmovie.warnerbros.com/。（我不粘贴此链接来宣传电影。）
我只是对这个 HTML5 网站感到惊讶。有没有人知道用于隐藏导航栏的方法？
菜单也做得很好。是否有任何框架可以构建这样的应用程序？
问问题
114360 次
4 回答
60
尝试以下操作：
在您的 HTML 文件中添加此
meta标记：head<meta name="apple-mobile-web-app-capable" content="yes" />在 iPhone 上使用 Safari 打开您的站点，然后使用书签功能将您的站点添加到主屏幕。
返回主屏幕并打开已添加书签的站点。URL 和状态栏将消失。
只要您只需要使用 iPhone，您应该可以使用此解决方案。
此外，您在 warnerbros.com 站点上的示例使用Sencha touch 框架。您可以谷歌它以获取更多信息或查看他们的演示。
于 2011-06-22T19:10:46.900 回答
34
Remy Sharp 在他的文章“Doing it right: skipping the iPhone url bar”中对这个过程有很好的描述：
让 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 片段的页面时滚动。
于 2011-05-15T21:16:21.373 回答
2
到目前为止给出的所有答案的问题在于，在借来的网站上，Mac 栏在向上滚动时仍然完全隐藏，而提供的答案并没有实现这一点。
如果您只是使用scrollTo然后用户稍后向上滚动，则导航栏会再次显示，因此您似乎必须将整个站点放在一个 div 内并强制滚动发生在该 div 内，而不是保持在 body 上导航栏在任何方向滚动时隐藏。
但是，您仍然可以通过在 Apple 设备上触摸屏幕顶部附近来显示导航栏。
于 2013-02-27T19:29:30.790 回答
-3
简单的 javascript 文档导航到“#”就可以了。
window.onload = function()
{
document.location.href = "#";
}
这将强制导航栏在加载时自行移除。
于 2014-06-26T14:25:30.690 回答