在移动设备上以全屏模式启动Web应用程序

Question

我有以下问题：

我使用jQuery Mobile 1.2创建了一个Web应用程序。现在我想以全屏模式启动此应用程序，不显示地址栏、工具栏等。我已经在网上搜索过，并发现有一些元标记可以启用此模式：

<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

目前来看，这个方法是正确的。但我也看到，这些标签只在iOS中起作用，在Android下会被忽略。

我以为框架应该可以自动切换模式，但它并没有生效。是否有特殊的全局变量需要操作或者框架函数需要调用或者需要加入脚本片段？

提前感谢！

- altralaser

---

“viewport” 不是仅限于 iOS 的，但我猜测 “apple-” 是 Apple 专属的。你可能无法让每个浏览器都以相同的方式运行。实际上，如果我的浏览器允许你的网站隐藏地址栏，我会感到不满意。 - Eonasdan

Answer 1

你可以使用以下javascript代码来隐藏Android设备中的地址栏：

if(navigator.userAgent.match(/Android/i)){
    window.scrollTo(0,1);
}

- Ryan Potter

Answer 2

我能够在安卓Chrome上让它工作：

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

- jason

Answer 3

在您的iPhone上，使用Safari打开您的网页。 接下来，点击分享按钮（底部栏中间的按钮）。

然后，点击“添加到主屏幕”按钮。 它将在您的主屏幕上创建一个书签。

您只需启动它，就可以使用您的Web应用程序了。

不要忘记添加您在问题中提到的代码。

- Xanatos

---

我知道如何将我的应用程序添加到主屏幕，但这只适用于iPhone。拥有一个适用于iOS、Android或Windows Phone的跨平台解决方案将是很棒的。 - altralaser