Safari手机全屏答案

【问题标题】：Safari Mobile full screenSafari手机全屏
【发布时间】：2011-09-02 20:55:57
【问题描述】：

我正在尝试在我的 iPhone Web App 上设置全屏模式，我已阅读 Apple 关于 apple-mobile-web-app-capable 元标记的文档，但它不起作用，你能帮帮我吗？谢谢

【问题讨论】：

您是否已将其添加到主屏幕并以这种方式启动？它在普通的 Safari 中不起作用。

标签： iphone web-applications fullscreen iphone-standalone-web-app metatag

【解决方案1】：

<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 name="apple-mobile-web-app-status-bar-style" content="black-translucent">

确保你按照巴拉克拉克所说的去做

值得一提的是，这些标签仅在应用保存时有效主屏幕并从那里启动

【讨论】：

那些元标记仅适用于 iOs safari 并且仅当用户将网站添加到他的主屏幕时。
值得一提的是，这些标签仅在应用程序保存在主屏幕并从那里启动时才有效。
我无法让它在 iOS 7 中运行，是的，我正在从保存的主屏幕图标启动。
我遇到了同样的问题，直到我找到了 Bala Clark 提到的答案。您必须通过在 safari 中选择带有向上箭头的框将站点添加到主屏幕，然后添加到主屏幕，这是针对 ios 8 的，我没有在其他版本的 ios 中测试过

【解决方案2】：

你也可以添加一个javascript函数：

<body onload="setTimeout(function() { window.scrollTo(0, 1) }, 100);">

【讨论】：

这适用于网址栏，但有没有办法在底部隐藏导航栏？
更多关于这个 javascript hack 在这里：mobile.tutsplus.com/tutorials/mobile-web-apps/…