适用于 Android 的全屏 Web 应用程序

Posted 2023-02-23

【中文标题】适用于 Android 的全屏 Web 应用程序

【英文标题】：Fullscreen Web App for Android

【发布时间】：2011-11-22 23:01:43

【问题描述】：

我想在 android 上以全屏模式运行我用 html5 编程的 Web 应用程序。 （隐藏状态栏和地址/导航栏）

对于 ios 你只写：

<meta name="apple-mobile-web-app-capable" content="yes" /> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">

但这在 Android 上不起作用。

javascript 有很多解决方案，但我尝试过的所有解决方案都不起作用。

有人知道解决办法吗？

【参考方案1】：

我认为你不会找到一个全局解决方案，因为不是每个人都使用默认的 android 网络浏览器（例如，我更喜欢 dolphin）。

面对这个事实，你需要尝试每一个肮脏的 javascript hack 来强制这种行为。

这适用于苹果设备的唯一原因是苹果在开发自定义浏览器方面非常严格，每个人都坚持使用默认应用。

【讨论】：

okey... 但是对于默认的 android webbrowser ？它是如何工作的？

老实说，我从未尝试过，因此必须对其进行研究。我看到类似“让页面滚动一个像素，然后它就消失了”

查看我的解决方案，在 android 和 iOS 的不同浏览器中对我来说效果很好

【参考方案2】：

从 Android 端和 对于低于蜂窝的版本，这应该使用：

Window w = getWindow();
w.addFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN);
w.clearFlags(WindowManager.LayoutParams.FLAG_FORCE_NOT_FULLSCREEN);

如果 Android 浏览器在读取元信息时没有做类似的事情，我会尝试查看 phonegap 以检查他们是否解决了这个问题。

【讨论】：

这是一个 WEB-App (HTML5) 不是原生应用程序

@user959456：请阅读我的完整答案。这些行是读取元数据时浏览器应该执行的操作。如果默认浏览器没有这样做，我建议您检查 phonegap 是否解决了这个问题。

【参考方案3】：

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

此标签旨在在您将网站添加到 iPhone 的主屏幕后显示无边框环境。

我不会依赖它来为 android 工作。

要在页面加载后让浏览器栏滚动到一边，请参阅以下问题的答案： Removing address bar from browser (to view on Android)

【讨论】：

这在 android 中完美运行，但我建议使用清单（它提供更多自定义选项）updates.html5rocks.com/2014/11/…

【参考方案4】：

此代码可能会有所帮助...

public void onCreate(Bundle savedInstanceState) 
    requestWindowFeature(Window.FEATURE_NO_TITLE); --> hide the Top Android Bar.
    super.onCreate(savedInstanceState);
    setContentView(R.layout.main);

【讨论】：

看下面的帖子，它不是关于原生应用的！

@user1.251064 尽管反对意见表明不受欢迎，但他们没有给出任何线索说明为什么......所以：也许“网络应用程序”（在浏览器中运行）和“本机”之间存在混淆app”（通常从应用商店获得）。 Web 应用程序使用 HTML/HTML5 和 CSS 和 Javascript ......但不是任何形式的 Java（至少不是 99% 的时间：-）。 Web 应用程序无法直接访问本机 SDK。一个好的经验法则是，如果它是在 Java 中，它只与本机应用程序相关，而不与网络应用程序相关。

【参考方案5】：

我混合使用了适用于 iOS 的 HTML 元标记和 JavaScript 解决方案。 它带走了 iOS 和 android 设备上的地址栏。它不会去掉 iOS 上的底部栏，因为它只会在用户将网页作为 HTML5 应用程序安装在他的主屏幕上时消失。

<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
<script type='text/javascript' charset='utf-8'>
    // Hides mobile browser's address bar when page is done loading.
      window.addEventListener('load', function(e) 
        setTimeout(function()  window.scrollTo(0, 1); , 1);
      , false);
</script>

我在后端使用 php 仅渲染用于移动浏览器的 JavaScript，并带有以下移动浏览器检测

if (preg_match('/iphone|ipod|android/',strtolower($_SERVER['HTTP_USER_AGENT'])))

【讨论】：

这适用于 Android 平板电脑吗？我尝试了代码，但它对我不起作用。我在设备三星平板电脑 android 版本 4.0.4 中使用 chrome 浏览器。

@ton 如果您找到解决方案，如果您更新答案，那就太好了。谢谢

从未见过。当我遇到这个问题时，我在 2012 年发布了这个。

【参考方案6】：

这对我来说适用于 Android 版 Chrome。

将此添加到头部标签：

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

然后在 chrome 浏览器菜单中，转到添加到主页。此图标现在将全屏打开您的网站。

【讨论】：

这是一个很好的解决方案。这样，用户就拥有了类似环境的应用程序。但如果有谷歌播放方式会更好。

通知栏在那里，但地址栏不见了

非常适合我需要做的事情，无需任何 hacky hack！

【参考方案7】：

根据 Google 的指示

自 Chrome M31 起，您可以将您的网络应用设置为拥有一个应用 快捷方式图标添加到设备的主屏幕，并启动应用程序 在全屏“应用模式”中使用 Chrome for Android 的“添加到 主屏幕”菜单项。

见https://developer.chrome.com/multidevice/android/installtohomescreen

【参考方案8】：

您可以通过谷歌新的渐进式网络应用程序添加服务工作者来实现这一点。看看这里：https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ 和 https://developers.google.com/web/progressive-web-apps/。

您可以在主屏幕中为您的 web 应用添加图标，获得全屏，可以使用推送通知等。