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