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

Question

我是移动HTML5的新手.我使用jQuery Mobile作为我当前的应用程序,我在隐藏导航栏时遇到了一些问题.

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

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

菜单也做得很好.是否有任何框架来构建这样的应用程序？

Answer 1

请尝试以下方法:

1. meta在headHTML文件中添加此标记:

   <meta name="apple-mobile-web-app-capable" content="yes" />
   

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

3. 返回主屏幕并打开已添加书签的网站.URL和状态栏将消失.

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

此外,您在warnerbros.com网站上的示例使用Sencha触摸框架.您可以谷歌搜索更多信息或查看他们的演示.

Answer 2

Remy Sharp在他的文章"正确行事:跳过iPhone网址栏"中对该过程有一个很好的描述:

让iPhone隐藏网址栏非常简单,您需要运行以下JavaScript:

window.scrollTo(0, 1); 

但是有什么时候的问题？一旦高度正确,你必须这样做,以便iPhone可以滚动到文档的第一个像素,否则它会尝试,然后高度将加载强制网址栏重新进入查看.

您可以等到图像已加载并且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上试试这个 ,你会看到它只会在你没有网址片段登陆页面时滚动.