Javascript 如何隐藏 iPhone 上的地址栏？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/4117377/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I hide the address bar on iPhone?
提问by Peter Szabo
How do I hide the address bar on iPhone?
如何隐藏 iPhone 上的地址栏？
I tried two different methods so far:
到目前为止，我尝试了两种不同的方法：
The scroll down one pixel trick with JavaScript on page load
And the following meta tags:
<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" />
在页面加载时使用 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" />
Also this:
还有这个：
<meta names="apple-mobile-web-app-status-bar-style" content="black-translucent" />
I am completely confused.
我完全糊涂了。
PS: Oh, I forgot a really important thing: the web page itself does not overflow the browser window. It probably is the reason why the 1 pixel scrolldown trick does not work.
PS：哦，我忘记了一件很重要的事情：网页本身不会溢出浏览器窗口。这可能是 1 像素向下滚动技巧不起作用的原因。
I can't make it bigger, since the hit thing about the design, that everyone can scroll, but this page folds... :)
我不能让它变大，因为关于设计的热门事物，每个人都可以滚动，但是这个页面折叠了...... :)
回答by rob
I just hit this myself. If the address bar is not hiding, the reason may simply be the page is not long enough to scroll.
我只是自己打这个。如果地址栏没有隐藏，原因可能仅仅是页面不够长无法滚动。
When the
当。。。的时候
window.scrollTo(0,1)
is called the page MUSTbe longer than the window so a scrolling event can occur.
被称为页面必须比窗口长，因此可以发生滚动事件。
Only when the scrolling even occurs will mobile safari hide the address bar.
仅当发生滚动时，mobile safari 才会隐藏地址栏。
回答by Nick Craver
Unless something has changed in recent iOS versions, the scroll down trick is the only one that reliably works, I've had no issues with this version:
除非最近的 iOS 版本发生了一些变化，否则向下滚动技巧是唯一可靠的方法，我对这个版本没有任何问题：
/mobile/i.test(navigator.userAgent) && !location.hash && setTimeout(function() {
window.scrollTo(0, 1);
}, 1000);?
I didn't care about any other mobile platform for this particular page though, it was redirecting based on agent...you may want to change the regex to check for iPhone specifically, e.g. replace /mobile/with /iPhone/.
不过，我并不关心这个特定页面的任何其他移动平台，它是基于代理重定向的……您可能想要更改正则表达式以专门检查 iPhone，例如替换/mobile/为/iPhone/.
回答by markquezada
UPDATE:Apple removedsupport for minimal-uiin iOS 8 so this is no longer a useful answer :(
更新：Apple删除了minimal-ui对 iOS 8 的支持，因此这不再是一个有用的答案:(
For new googlers looking into this: As of iOS 7.1there's a new minimal-uimode that works on mobile Safari:
对于研究此问题的新谷歌员工：从iOS 7.1 开始，有一种minimal-ui适用于移动 Safari的新模式：
It's enabled by setting the minimal-uiproperty on the viewport:
它是通过minimal-ui在视口上设置属性来启用的：
<meta name="viewport" content="minimal-ui">
You can also use it in conjunction with other properties like so:
您还可以将它与其他属性结合使用，如下所示：
<meta name="viewport" content="width=device-width, minimal-ui">
Of note, there's no minimum content length requirement as there is with the scrollTohack. There's a great overview of this new mode here. (That's where the above image comes from.) He also lists some shortcomings.
值得注意的是，与scrollTohack一样，没有最小内容长度要求。此处对这种新模式进行了很好的概述。（这就是上图的来源。）他还列出了一些缺点。
The only official documentation I could find on this is a note in Apple's iOS 7.1 release notes:
我能找到的唯一官方文档是Apple 的 iOS 7.1 发行说明中的一个说明：
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
For example, use
<meta name="viewport" content="width=1024, minimal-ui”>.
为视口元标记键添加了一个属性 minimum-ui，允许在页面加载时最小化 iPhone 上的顶部和底部栏。在使用最小用户界面的页面上，点击顶部栏会返回栏。再次点击内容会再次关闭它们。
例如，使用
<meta name="viewport" content="width=1024, minimal-ui”>.
Of course, since this only works in iOS 7.1 and above, it's usefulness may be limited.
当然，由于这只适用于 iOS 7.1 及更高版本，它的用处可能有限。
回答by Simon East
I think this version is actually better. It tests to see if the user has already begun scrolling, which is an issue I noticed in my mobile project.
我认为这个版本实际上更好。它测试用户是否已经开始滚动，这是我在我的移动项目中注意到的一个问题。
/Mobile/.test(navigator.userAgent) && !location.hash && setTimeout(function () {
if (!pageYOffset) window.scrollTo(0, 1);
}, 1000);
回答by mmw5610
I have been searching around on this full screen web app as well and i found this.
我也一直在这个全屏网络应用程序上搜索，我发现了这个。
http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/
http://www.onlywebpro.com/2015/07/19/optimizing-full-screen-mobile-web-app-for-ios/
1.basically you need add the following in your header:
1.basically你需要在你的标题中添加以下内容：
<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">
- Open the site at Safari
- Tap on the "Open with" icon ( arrow pointing upwards and box below it) beside refresh button at the URL bar
- Select "Add to home scree"
- go homescreen and open the "App name"
- Voila! website with no URL bar or navigation buttons!
- 在 Safari 中打开网站
- 点击 URL 栏刷新按钮旁边的“打开方式”图标（向上的箭头和下方的框）
- 选择“添加到主屏幕”
- 转到主屏幕并打开“应用程序名称”
- 瞧！没有 URL 栏或导航按钮的网站！
回答by Creatorus
<meta name="apple-mobile-web-app-capable" content="yes" />
回答by Mike
Try:
尝试：
setTimeout(function () {
window.scrollTo(0, 1);
}, 1000);
If using jQuery, put it at the end of $(document).ready();. The time-out allows for the browser to determine the height of the page...
如果使用 jQuery，请将其放在$(document).ready();. 超时允许浏览器确定页面的高度......
回答by herson
You can run the function when the site content is ready instead of using timeout
您可以在网站内容准备好时运行该功能，而不是使用超时
addEventListener("load", function() {
window.scrollTo(1, 0);
}, false);
回答by foliomobshawn
I think it will never be solved unless the content is more than the browser window.
我认为除非内容超过浏览器窗口，否则永远不会解决。
Here is some code that will hide the URL on load, on orientation change, and on a touchstart (the touchstart should only be used if you have a persistent hidden URL, which is a whole other can of worms - if you don't, remove that part of the script).
这里有一些代码可以在加载、方向改变和 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);
});
}
回答by Mo Alsaedi
In case none of these solutions work and you are running into the very narrow issue that I faced, here's what fixed it for me.
如果这些解决方案都不起作用，并且您遇到了我面临的非常狭窄的问题，以下是为我解决的问题。
I had this in my CSS
我的 CSS 中有这个
html{position: relative; height: 100%; overflow: hidden;}
This css applies a fix to one of my pages only, so I restricted it with a condition to that page, and the address bar is now behaving correctly on all other pages.
这个 css 只对我的一个页面应用修复，所以我用一个条件限制了它到那个页面，地址栏现在在所有其他页面上都正常运行。
