Question

我想在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有很多解决方案，但我尝试的所有解决方案都不起作用。

有人知道解决方案吗？

Answer 1

这适用于我的Chrome for Android。

将此添加到头标记：

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

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

Answer 2

我使用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'])))

Answer 3

我认为你不会找到全球解决方案，因为不是每个人都使用默认的android webbrowser（例如我更喜欢dolphin）。

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

这对苹果设备有效的唯一原因是苹果对开发自定义浏览器的限制非常严格，并且每个人都坚持使用默认应用程序。

Answer 4

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

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

Answer 5

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

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

我不会依赖这个来为Android工作。

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

Answer 6

如Google所示

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

请参阅https://developer.chrome.com/multidevice/android/installtohomescreen

Answer 7

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

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

Answer 8

从Android端和用于低于蜂窝的版本，这应该使用以下方式完成：

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

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

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

8 个答案: