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



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

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

如iPhone开发中心上指定的,但从主屏幕图标启动时,地址栏和工具栏仍然存在。我需要做什么不同的事情?有人举个例子吗?

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

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

它是从主屏幕启动的吗?链接页面上的文档没有提到,但我发现了这个@配置Web应用程序:

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

您是否尝试添加。。。

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

据我所知,iOS只在您实际添加应用程序时才注意标志。如果支持苹果移动网络应用程序的东西一开始不起作用,请尝试从主屏幕删除你的应用程序,然后重新添加。

我做了一些实验,发现:

  • meta标签在标题中的位置似乎并不重要(我认为可能!)
  • 在添加应用程序并使其正确删除地址栏后,如果您随后从网页中删除元标签,iOS将继续删除工具栏
  • 即使在重新启动设备后,它仍然"记得"是否删除工具栏。我找到的重置这种行为的唯一方法是删除并重新添加应用程序

希望能有所帮助!

我知道这很旧,但我在寻找解决方案时遇到了这个问题。我可以通过添加以下内容来修复此问题:

window.top.scrollTo(0, 1);

身体的加载方法。希望它能帮助其他遇到这种情况的人。

iOS浏览器考虑了一个新指令,称为"minimum ui"(至少在我测试的iPhone上)。工具栏将被隐藏,直到用户单击顶部的状态栏。非常适合单页应用程序!

这是我使用的片段:

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

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 7.1以来,您可以使用minimal-ui

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

这确实应该如预期的那样,我在过去使用过它,没有遇到任何困难。

<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上的书签旁边找到了一个按钮,你可以在那里获得一个名为"添加到主屏幕"的选项,它会创建一个新的互动程序图标,你可以像本地应用程序一样启动你的网络应用程序,那里没有地址栏。

相关内容

最新更新