如何隐藏iPhone上的地址栏？

我有一种简单的问题：如何隐藏iPhone上的地址栏？如何隐藏iPhone上的地址栏？

我试过到目前为止两种不同的方法：

在页面加载下一个像素招用javascript滚动

而下面的meta标签：

<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像素滚动技巧不起作用的原因。

不能使它更大，因为对设计的命中事情，每个人都可以滚动，但这个页面折叠... :)

来源

2010-11-07 Peter Szabo

如果页面没有溢出浏览器视口，为什么不让页面体高一点，滚动到0,1隐藏地址栏，然后禁用滚动？ – Rengers 2010-11-07 19:07:44

如果应用程序是通过主屏幕上的书签启动的，则这些元标记只会起作用。更多信息：https：//developer.apple.com/library/safari/codinghowtos/Mobile/UserExperience/_index。html – xentek 2013-09-23 21:48:18

只要点击这个我自己，如果地址栏没有隐藏，原因可能只是页面不够长而无法滚动。

当

window.scrollTo(0,1)

被称为页面必须比窗长，以便可以进行滚动事件。只有当滚动发生时，移动Safari才会隐藏地址栏。

来源

2011-09-20 15:01:21 rob

这应该有更多的选票，你绝对发现关于页面高度。如果没有任何东西，就不能滚动！ – iamkeir 2012-04-16 12:30:07

要使其正确的高度，请参阅：http://stackoverflow.com/questions/5206811/hide-iphone-address-bar-with-100-height – poshaughnessy 2013-06-05 14:37:46

正在寻找'隐藏地址栏'不工作，但相反，这解决了我的问题'宽度= device_width'不起作用。 +1。 – P5Coder 2013-09-11 11:53:36

除非出现在最近的IOS版本已经改变，向下滚动绝招是，可靠地工作只有一个，我已经没有任何问题与this version：

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

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

来源

2010-11-07 10:52:14

这是一个只有iphone的微型网站。感谢您的建议尼克，会尝试;-) – 2010-11-07 11:08:53

不，仍然没有效果。但我认为，我做错了什么。我附上你刚刚给我的代码，用jQuery加载： – 2010-11-07 11:17:49

我知道这个线程开始年龄，但如果你来到这里寻找答案，请尝试：

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

如果使用jQuery，把在$(document).ready(); 的超时结束允许浏览器确定页面的高度...

来源

2011-02-24 22:19:27 Mike

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

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

来源

2011-05-27 07:26:28

时，该网站内容已准备就绪，而不是使用超时

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

来源

2012-01-05 16:17:48 herson

我知道这是旧的文章您可以运行的功能，但要回答这个问题，我觉得它永远不会，除非内容来解决比观察窗大。

这里有一些代码会隐藏负载，方向变化和touchstart上的URL（只有当你有一个持久隐藏的url，这是一个其他蠕虫的整个 - 只要你使用touchstart不要，删除脚本的那部分）。

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); 
    }); 
}

来源

2012-03-08 23:36:19 foliomobshawn

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

iPhone Configuring Web Applications

来源

2012-03-30 12:07:32 Creatorus

不起作用 – 2012-11-20 13:25:09

这仅适用于用户将网站加入书签作为主屏幕图标。 – markquezada 2014-07-18 20:18:14

UPDATE：苹果iOS中8 minimal-uiremoved支持，因此这不再是一个有用的答案:(

对于新的Google寻找到这：截至iOS 7.1有一个新的minimal-ui模式在移动Safari浏览器的工作原理：

minimal-ui

它是由设置在视口中minimal-ui属性enabled：

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

可以配合其他性能还可以使用它像这样：

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

值得注意的是，没有最小内容长度要求，因为有scrollTo破解。这个新模式有一个很好的概述here。（这就是上面图片的来源。）他还列出了一些缺点。

唯一的官方文档我能找到的，这是在Apple's iOS 7.1 release notes记：

的属性，最小的UI，已经添加了对允许最小化的顶部和底部的酒吧视meta标签的关键iPhone作为页面加载。在使用minimal-ui的页面上时，轻敲顶部栏会将条带拉回。重新点击内容会再次解散它们。

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

当然，因为中的iOS 7.1及以上这只作品，它的效用是有限的。

来源

2014-07-18 20:31:09 markquezada

这听起来真的很好，直到你意识到[它在iOS 8中被删除]（http://stackoverflow.com/q/24889100/1676444）:(在关联的问题上，[Gajus解释了'minimal-ui'的替代方案] （http://stackoverflow.com/a/26884561/1676444）可能会帮助一些人。 – Turnerj 2015-09-03 01:39:44

如果这些解决方案都不起作用，而且您遇到了我遇到的非常狭窄的问题，请参阅以下问题。

我在CSS

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

这个CSS适用修复到只有我的一个网页有这个，所以我到该网页的条件限制它，并在地址栏现在行为正确地在所有其他页面。

来源

2017-11-20 19:37:54

如何隐藏iPhone上的地址栏？

回答

相关问题