使用Apple元标记进行全屏网络应用

时间:2012-10-04 19:28:49

标签: javascript ios web-applications safari mobile-safari

我正在尝试使用

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

标签让iOS Safari显示没有浏览器内容的页面;至少,这就是我认为它应该为我做的事情。 (Apple documentation没有详细说明。)

到目前为止,我无法做任何事情。 Here is a JSBin example.使用<meta>标签时,该页面会出现在iPod Touch和iPad 2上,浏览器内容位于顶部(在小屏幕上方)。

为了影响浏览器,还有其他事情需要发生吗?或者我对它应该如何工作的期望是不正确的? (注意,通过weinre,我检查了“windows.navigator.standalone”标志,它似乎是false。)

2 个答案:

答案 0 :(得分:5)

只有当用户将应用链接添加到主屏幕时,才能执行您想要的操作。

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

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

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

答案 1 :(得分:3)

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