将苹果元标记用于全屏网页应用



我正在尝试使用

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

标签,让iOS Safari显示一个没有浏览器内容的页面;至少,这是我认为它应该为我做的。(苹果文档没有详细介绍。

到目前为止,我无法让它做任何事情。下面是一个 JSBin 示例。 无论是否带有<meta>标签,该页面都会出现在iPod Touch和iPad 2上,浏览器内容位于顶部(小屏幕底部)。

是否还需要发生其他事情才能影响浏览器? 还是我对它应该如何工作的期望不正确? (请注意,通过weinre,我已经检查了"windows.navigator.standalone"标志,它似乎是false

仅当用户将指向您的应用的链接添加到其主屏幕时,它才会执行您想要的操作。

浏览器内情况的常见方法是添加对window.scroll(0,1)的调用,这将使浏览器的内容离开屏幕顶部。(没有办法清除底部的东西。

此外,您可能希望标记表明您不希望缩放:

<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, user-scalable=no, maximum-scale=1, minimum-scale=1" />

元标记的作用是当您在浏览器中查看页面时,它会添加一个选项,将您的页面添加到主屏幕。当您通过主屏幕快捷方式打开页面时,它将全屏显示,并且 navigator.standalone 将设置为 true。这就是人们在谈论全屏模式时所指的。

最新更新