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

Posted 2021-05-02

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

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

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

答案

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

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

另一答案

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

这将适用于：

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

另一答案

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

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

另一答案

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

另一答案

从iOS 7.1开始，您可以使用minimal-ui

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

另一答案

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

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

另一答案

你试过添加......

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

另一答案

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

我做了一些实验，发现：

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

希望有所帮助！

另一答案

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

window.top.scrollTo(0, 1);

到身体的onload方法。希望它可以帮助其他人遇到这个。

另一答案

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

它适用于iOS 4.0。

另一答案

试试这个

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

另一答案

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

这是我使用的代码片段：

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

另一答案

这确实应该像预期的那样，我过去使用它没有任何困难。