问题 是否可以在普通网页上隐藏iOS浏览器chrome


因此,如果用户将您的页面添加到主屏幕,您可以使网站“全屏”并隐藏ipad上的地址栏/ chrome,这会在主屏幕上显示他们启动您网站的图标。你只需要放一些这样的元标记:

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

但是,当页面处于正常浏览会话中时,我无法让网站隐藏浏览器镶边(用户尚未直接从主屏幕上的图标启动您的网站)。有可能这样做吗?怎么样?


3886
2018-06-22 13:08


起源

我认为你想要移动版Gmail的行为,但无需在主屏幕上显示图标......对吗? - 根据我在这里读到的内容: daringfireball.net/linked/2008/10/03/fullscreen-iphone-web-apps 它仅适用于有主屏幕图标的情况。 - scunliffe
Gmail在某种程度上做到了这一点。您仍然可以使用两根手指向下滑动将地址栏滚动到视图中。现在看看他们的方法。 - Marcel
@scunliffe:Jinx! - Marcel
@Marcel Jinx确实! - 为2指滑动提示获得地址栏的荣誉!我一直在寻找这种能力已经有一段时间了! - scunliffe
@scunliffe,这是对的。我想确定是否有可能(或没有)在没有从主屏幕按钮启动的情况下具有该行为。 - Rafe


答案:


根据 Apple Docs 它并没有特别说你不能(但是正如你所指出的那样,当网站被添加到你的主屏幕时,它似乎只是表现得很好)。

我也注意到了 Apple支持论坛 共识似乎是您需要从主屏幕启动才能获得所需的效果。

来自Docs的报价:

apple-mobile-web-app-capable

设置Web应用程序是否以全屏模式运行。

句法

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

讨论

如果content设置为yes,则Web应用程序以全屏模式运行;否则,它没有。默认行为是使用Safari显示Web内容。

您可以使用确定是否以全屏模式显示网页 window.navigator.standalone 只读布尔JavaScript属性。

可用性

适用于iOS 2.1及更高版本。


8
2018-06-22 14:22





我发现这个有效,

$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');

我注意到向下滚动删除它,所以滚动60px(铬的高度),但是隐藏它并向下滚动页面,但是滚动0px,假设你的页面已经从顶部开始(不是在#target上),傻瓜吧!

我想你甚至可以删除延迟和动画,但我希望它是平滑的,而不是太生涩。


3
2018-06-25 13:09



这是一个甜蜜的把戏! - Ben Roberts
这似乎不再起作用(我正在使用iOS 8)。 - Blazemonger
这不适用于iOS 9.3.1 - Safari - evolutionxbox