如何在iPhone上隐藏地址栏？

Question

如何在iPhone上隐藏地址栏？

到目前为止我尝试了两种不同的方法

• 在页面加载时使用JavaScript向下滚动一个像素技巧

• 以下元标记:

  <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" /><meta name="apple-mobile-web-app-capable" content="yes" />
  

这个:

<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />

我完全糊涂了.

PS:哦,我忘了一个非常重要的事情:网页本身不会溢出浏览器窗口.这可能是1像素滚动技巧不起作用的原因.

我无法做大,因为关于设计的热门话题,每个人都可以滚动,但这个页面折叠... :)

Answer 1

我自己就是这样打的.如果地址栏没有隐藏,原因可能只是页面不够滚动.

当...的时候

window.scrollTo(0,1)

被称为页面必须比窗口长,因此可以发生滚动事件.

只有当滚动均匀发生时,移动safari才会隐藏地址栏.

Answer 2

除非在最近的iOS版本中发生了某些变化,否则向下滚动技巧是唯一可靠的工作,我对这个版本没有任何问题:

/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
  window.scrollTo(0, 1);
}, 1000);?

我并不关心这个特定页面的任何其他移动平台,它是基于代理重定向...你可能想要改变正则表达式来专门检查iPhone,例如替换/mobile/为/iPhone/.

Answer 3

更新: Apple 取消了minimal-ui对iOS 8的支持,因此这不再是一个有用的答案:(

对于新的谷歌搜索者:从iOS 7.1开始,有一种minimal-ui适用于移动Safari 的新模式:

通过minimal-ui在视口上设置属性来启用它:

<meta name="viewport" content="minimal-ui">

您还可以将其与其他属性结合使用,如下所示:

<meta name="viewport" content="width=device-width, minimal-ui">

值得注意的是,没有最低内容长度要求,因为有scrollTo黑客攻击.有这种新模式的很好的概述这里.(这就是上面图片的来源.)他还列出了一些缺点.

我能找到的唯一官方文档是Apple的iOS 7.1发行说明中的​​注释:

为视口元标记键添加了一个属性minimal-ui,允许在页面加载时最小化iPhone上的顶部和底部条形.在使用minimal-ui的页面上,点击顶部栏会使栏回来.回击内容会再次驳回它们.

例如,使用<meta name="viewport" content="width=1024, minimal-ui”>.

当然,由于这仅适用于iOS 7.1及更高版本,因此它的用处可能有限.

Answer 4

我认为这个版本实际上更好.它测试用户是否已经开始滚动,这是我在移动项目中注意到的问题.

/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
    if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);