使用苹果的元标签来制作全屏web应用程序

Question

我正在尝试使用。

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

我需要一个标签来让iOS Safari显示一个没有浏览器内容的页面；至少，我认为这是这个标签应该为我所做的事情。（苹果的文档没有详细说明。）

到目前为止，我无法使其起作用。 这里是JSBin示例。 无论是有还是没有<meta>标签，在iPod Touch和iPad 2上打开页面都会显示浏览器的内容（小屏幕上还有底部）。

是否还需要其他操作以影响浏览器？或者我的期望是错误的？（请注意，通过weinre，我已检查了“windows.navigator.standalone”标志，它显示为false。）

- Pointy

Answer 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" />

- Joshua Smith

---

啊！苹果公司在文档中提到这个有趣的细节会更友好一些。非常感谢！（是的，我也有视口标签。） - Pointy

这个项目是让用户进行添加操作的好方法： http://cubiq.org/add-to-home-screen - Joshua Smith

他们确实有，只是不是你正在查看的文档 :) http://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - Joshua Smith

将window.scrollTop()赋值给一个变量，滚动到该变量会使得页面在方向改变时全屏显示在同一位置。 - Santiago Rebella

滚动条可以提供临时解决方案，但在小屏幕设备上（iPod touch 或手机）无法解决浏览器页脚的问题。 - Pointy

Answer 2

标签的作用是在浏览器中查看页面时，添加一个选项将该页面添加到主屏幕上。当您通过主屏幕快捷方式打开页面时，它将全屏显示，并且navigator.standalone会被设置为true。这就是人们所说的全屏模式。

- HoLyVieR

---

只是要补充一点，在添加了元标记之后，您必须将页面添加到主页。 - NicklasF