为了隐藏作为主屏幕图标书签的 Web 应用程序的 Safari UI 组件，我正在使用此元标记。
<meta name="apple-mobile-web-app-capable" content="yes" />
按照iPhone Dev Center上的规定操作，但从主屏幕图标启动时地址栏和工具栏仍然存在。我需要做些什么不同的事情吗？有人有例子吗？
13个回答
30
window.top.scrollTo(0, 1);
在iPhone上可用，但在iPad上无法使用。我已成功地通过以下方式在iPad（和其他地方）隐藏了浏览器组件：
<meta name="apple-mobile-web-app-capable" content="yes" />
我还使用主屏幕链接启动应用。
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
我还没有尝试过在省略视口属性的情况下查看浏览器组件是否仍然隐藏。
- Steve Jorgensen
4
7
它是否从主屏幕启动？链接页面上的文档没有提到，但我在这里找到了@ 配置 Web 应用：
例如，您可以指定一个图标来代表您的 Web 应用程序，当其添加到主屏幕时使用，如“为 Web Clip 指定网页图标”中所述。您还可以缩小 iPhone 上 Safari 用户界面，如“更改状态栏外观”和“隐藏 Safari 用户界面组件”中所述，在从主屏幕启动您的 Web 应用程序时。这些都是可选设置，当添加到您的 Web 内容时，其他平台会忽略它们。
例如，您可以指定一个图标来代表您的 Web 应用程序，当其添加到主屏幕时使用，如“为 Web Clip 指定网页图标”中所述。您还可以缩小 iPhone 上 Safari 用户界面，如“更改状态栏外观”和“隐藏 Safari 用户界面组件”中所述，在从主屏幕启动您的 Web 应用程序时。这些都是可选设置，当添加到您的 Web 内容时，其他平台会忽略它们。
- crashmstr
2
1这是更新后的链接：http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html - EMMERICH
完全正确，crashmstr。元标签仅在从主屏幕启动应用程序时起作用。 - Brett Hannah
6
Have you tried adding...
<meta name="apple-touch-fullscreen" content="yes" />
- Benoit
2
这是未记录的。可能不会在Mobile Safari的稳定版本中使用。 - Raptor
确实，无法再找到对此的参考资料（写于2010年）。今天似乎只建议使用
<meta name="apple-mobile-web-app-capable" content="yes" />（请参见此处）。 - Benoit3
据我所知，iOS仅在您实际添加应用程序时才关注标志。如果apple-mobile-web-app-capable在一开始没有起作用，请尝试从主屏幕中删除您的应用程序，然后重新添加它。
我做了一些实验并发现以下内容：
我做了一些实验并发现以下内容：
- 元标记在头部的位置似乎不重要（我以为它可能很重要！）
- 在添加应用程序并正确地将地址栏移除后，如果您从网页中删除元标记，则iOS会继续移除工具栏。
- 即使重新启动设备，它仍然“记得”是否要移除工具栏。我找到的唯一重置此行为的方法是删除并重新添加应用程序。
- Andrew
2
我知道这可能比较老，但我在寻找解决方案时遇到了这个问题。我也通过添加以下内容来修复它:
window.top.scrollTo(0, 1);
添加到页面的onload方法中。希望能帮助其他遇到这个问题的人。
- mbxtr
2
有一个新的指令叫做“minimal-ui”，iOS浏览器会考虑到它（至少在我测试的iPhone上）。工具栏会隐藏，直到用户点击顶部状态栏。对于单页应用程序非常好！以下是我使用的代码片段：
- Cristian Dinu
1
试试这个
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width; user-scalable=0;">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-icon" href="icon.png">
- Pierre
1
自iOS 7.1以来，您可以使用
minimal-ui。<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
- B.Asselin
0
所有上述的元标签和window.scrollTo，在我的iPad上都无法使用， 我在Safari浏览器中找到了一个按钮，位于书签旁边，你可以选择“添加到主屏幕”，它会创建一个新的图标，你可以像本地应用程序一样启动你的Web应用程序，而且没有地址栏。
- jsDebugger
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接
apple-mobile-web-app-capable的重要说明，如果您已经将该应用程序添加到书签，请删除该书签并重新添加以启用更改。 - Chris Baxter