以全屏模式启动移动 Web 应用答案

【问题标题】：Start mobile webapp in fullscreen mode以全屏模式启动移动 Web 应用
【发布时间】：2023-12-13 19:02:02
【问题描述】：

我有以下问题：

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

<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 下会被忽略。我认为框架应该自动切换模式，但它不起作用。是否有我必须操作的特殊全局变量或要调用的框架函数或要包含的脚本 sn-p？

提前致谢！

【问题讨论】：

viewport 不是 iOS 特定的，但 .. 我在这里猜测 .. apple- 是 .. Apple 特定的。您可能不会让每个浏览器都以相同的方式运行。事实上，如果我的浏览器允许您的网站隐藏地址栏，我会很生气

标签： jquery web-applications mobile fullscreen

【解决方案1】：

我能够让它在 chrome for android 上工作：

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

【讨论】：

【解决方案2】：

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

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

你只需要启动它，你就拥有了你的 webapp。

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

【讨论】：

我知道如何将我的应用程序添加到主屏幕，但这只能在 iPhone 上实现。如果能为 iOS、Android 或 Windows Phone 提供一个独立于平台的解决方案，那就太好了。

【解决方案3】：

您可以使用这段 javascript 来隐藏 android 中的地址栏：

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

【讨论】：