Question

试图隐藏作为主屏幕图标书签的网络应用程序的Safari UI组件。我正在使用这个元标记

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

在iPhone Dev Center上指定，但从主屏幕图标启动时，地址栏和工具栏仍然存在。我需要做些什么呢？有人有例子吗？

Answer 1

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

如果我遗漏视口属性，我还没有尝试查看浏览器组件是否仍然隐藏。

Answer 2

是否从主屏幕启动？链接页面上的文档没有提及，但我发现了这个@ Configuring Web Applications：

例如，您可以在添加到主屏幕时为Web应用程序指定用于表示它的图标，如“为Web剪辑指定网页图标”中所述。您还可以最小化iPhone上的Safari用户界面，如“更改状态栏外观”和“隐藏Safari用户界面组件”，从主屏幕启动Web应用程序时中所述。这些都是可选设置，当添加到您的Web内容时，其他平台会忽略这些设置

Answer 3

您是否尝试过添加...

<meta name="apple-touch-fullscreen" content="yes" />

Answer 4

据我所知，iOS实际添加应用时只关注标志。如果启用apple-mobile-web-app功能的东西不起作用，请尝试从主屏幕删除您的应用，然后重新添加。

我做了一些实验并发现：

标题中元标记的位置似乎并不重要（我认为可能！）
添加应用程序并正确删除地址栏后，如果您从网页中删除元标记，iOS将继续删除工具栏。
即使重启设备后，它仍然“记得”是否删除工具栏。我发现重置此行为的唯一方法是删除并重新添加该应用。

希望有所帮助！

Answer 5

我知道这已经很老了，但我在寻找解决方案时遇到了这个问题。我还能通过添加：

来解决这个问题

window.top.scrollTo(0, 1);

到body的onload方法。希望它可以帮助其他任何人遇到这个。

Answer 6

http://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html#//apple_ref/doc/uid/TP40002051-CH3-SW2

适用于iOS 4.0。

Answer 7

试试这个

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

Answer 8

iOS浏览器考虑了一个名为“minimal-ui”的新指令（至少在我测试过的iPhone上）。工具栏将被隐藏，直到用户点击顶部的状态栏。非常适合单页应用！

以下是我使用的代码段：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, minimal-ui">

Answer 9

这确实应该像预期的那样表现，我过去没有遇到任何困难。

Answer 10

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

如果符合以下条件，则可以这样做：

当应用程序添加到主屏幕时，标记存在。
该应用程序从主屏幕启动。

Answer 11

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

适用于iOS6 + Mobile Safari浏览器，但只有在您在网站上添加元标记后才将页面添加到主屏幕。

Answer 12

所有上面的元标记和window.scrollTo，对我来说在ipad上都不起作用，我在书签旁边的safari上找到了一个按钮，您可以在其中获得一个名为“添加到主屏幕”的选项，它会创建一个新的图块图标，您可以启动您的网络应用程序，就像本机应用程序一样，并且没有地址栏。

Answer 13

自iOS 7.1起，您可以使用minimal-ui

<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">

隐藏iPhone上的Safari用户界面组件

13 个答案: