26

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

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

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

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

4

4 回答 4

60

尝试以下操作:

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

    <meta name="apple-mobile-web-app-capable" content="yes" />
    
  2. 在 iPhone 上使用 Safari 打开您的站点,然后使用书签功能将您的站点添加到主屏幕。

  3. 返回主屏幕并打开已添加书签的站点。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 回答