将 Apple 元标记用于全屏 Web 应用程序答案

【问题标题】：Using the Apple meta tag for full-screen web app将 Apple 元标记用于全屏 Web 应用程序
【发布时间】：2012-09-25 21:57:41
【问题描述】：

我正在尝试使用

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

标签让iOS Safari显示没有浏览器内容的页面；至少，这是我认为它应该为我做的。（Apple documentation 没有详细介绍。）

到目前为止，我无法让它做任何事情。 Here is a JSBin example. 带有或不带有<meta> 标签，页面出现在iPod Touch 和iPad 2 上，浏览器内容位于顶部（小屏幕底部）。

为了影响浏览器，是否还需要发生其他事情？还是我对它应该如何工作的期望不正确？（请注意，通过 weinre，我检查了“windows.navigator.standalone”标志，它似乎是 false。）

【问题讨论】：

【解决方案1】：

只有当用户将指向您的应用的链接添加到他们的主屏幕时，它才会执行您想要的操作。

浏览器内情况的一种常见方法是添加对window.scroll(0,1) 的调用，这将使浏览器内容脱离屏幕顶部。（没有办法清除底部的东西。）

另外，你可能想要一个标签说你不想缩放：

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" />

【讨论】：

啊！好吧，Apple 在文档中提到这个有趣的花絮会有点友好。非常感谢！（是的，我也有 viewport 标签。）
这个项目是让用户执行添加操作的好方法：cubiq.org/add-to-home-screen
他们有，只是不是您正在查看的文档 :) developer.apple.com/library/ios/#DOCUMENTATION/…
你也可以使用 window.scrollTo(0, 1);由于stackoverflow.com/questions/1925671/…，我认为是相同的，但不确定推荐使用哪个。
window.scrollTop();在变量中并滚动到该变量使其全屏显示到页面的相同位置以更改方向

【解决方案2】：

元标记的作用是当您在浏览器中查看页面时，它会添加一个选项以将您的页面添加到主屏幕。当您通过主屏幕快捷方式打开页面时，它将处于全屏状态，并且 navigator.standalone 将设置为 true。这就是人们在谈到全屏模式时所指的内容。

【讨论】：