如何隐藏 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

? 更新： Apple removed 在 iOS 8 中支持 minimal-ui 所以这不再是一个有用的答案:(

---

对于正在研究此问题的新谷歌用户：从 iOS 7.1 开始，有一个新的minimal-ui 模式适用于移动 Safari：

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

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

您还可以将它与其他属性结合使用，如下所示：

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

值得注意的是，没有像scrollTo hack 那样的最小内容长度要求。对这种新模式here 有一个很好的概述。 （这就是上图的出处。）他还列出了一些缺点。

我能找到的唯一官方文档是Apple's iOS 7.1 release notes 中的注释：

已为视口元标记键添加了一个属性 minimum-ui，该属性允许在页面加载时最小化 iPhone 上的顶部和底部栏。在使用最小用户界面的页面上，点击顶部栏会返回栏。再次点击内容会再次关闭它们。

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

当然，由于这仅适用于 iOS 7.1 及更高版本，它的用处可能会受到限制。

Answer 3

除非最近的 iOS 版本发生了一些变化，否则向下滚动技巧是唯一可靠的方法，我对 this version 没有任何问题：

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

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

Answer 4

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

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

Answer 5

您可以在网站内容准备好时运行该函数，而不是使用超时

addEventListener("load", function() {
    window.scrollTo(1, 0);
}, false);

Answer 6

我也一直在这个全屏网络应用上搜索，我找到了这个。

http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/

1. 基本上您需要在标题中添加以下内容：

<meta name="viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale = 1, maximum-scale = 1, user-scalable = no" />
    
//App name
<meta name="apple-mobile-web-app-title" content="App name" />

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

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

//APP ICONS 
<link rel="apple-touch-icon" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="76x76" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="120x120" href="/img/icon.png">

<link rel="apple-touch-icon" sizes="152x152" href="/img/icon.png">

1. 在 Safari 中打开网站
2. 点击 URL 栏刷新按钮旁边的“打开方式”图标（向上的箭头和下方的框）
3. 选择“添加到主屏幕”
4. 转到主屏幕并打开“应用名称”
5. 瞧！没有网址栏或导航按钮的网站！

Answer 7

试试：

setTimeout(function () {
  window.scrollTo(0, 1);
}, 1000);

如果使用 jQuery，请将其放在 $(document).ready(); 的末尾。超时允许浏览器确定页面的高度...

Answer 8

如果这些解决方案都不起作用，而您遇到了我所面临的非常狭窄的问题，那么这就是为我解决的问题。

我的 CSS 中有这个

html{position: relative; height: 100%; overflow: hidden;}

这个 css 只对我的一个页面进行了修复，所以我用一个条件限制了它，并且地址栏现在在所有其他页面上都可以正常工作。

Answer 9

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

iPhone Configuring Web Applications

Answer 10

我认为除非内容超过浏览器窗口，否则永远无法解决。

这里有一些代码会在加载、方向更改和 touchstart 时隐藏 URL（只有当你有一个永久隐藏 URL 时才应该使用 touchstart，这是一个完全不同的蠕虫罐 - 如果你不这样做't，删除脚本的那部分）。

if( !window.location.hash && window.addEventListener ){
    window.addEventListener("load", function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "orientationchange",function() {
        setTimeout(function(){
            window.scrollTo(0, 0);
        }, 0);
    });
    window.addEventListener( "touchstart",function() {
         setTimeout(function(){
             window.scrollTo(0, 0);
         }, 0);
     });
}

Answer 11

<meta charset="utf-8"><meta name="description" content="{MF_PLUGIN_SETTING:HOME_DESCRIPTION}"/><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1"/><meta name="apple-mobile-web-app-capable" content="yes"><meta name="mobile-web-app-capable" content="yes"> 

这用于在没有搜索栏的情况下将 ios Web 应用添加到主屏幕。