Fullscreen Web App for Android

Question

I want to run my Web App, which i programmed with HTML5, in fullscreen mode on Android. (hide the status bar, and the adress/navigation bar)

for iOS you only write:

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

But that did not work on Android.

There are a lot of solution´s with Javascript, but all solutions which I tried are inoperative.

Somebody know the solution?

Answer 1

This worked for me on Chrome for Android.

Add this to the head tags:

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

Then in the chrome browser menu, Goto Add to Homepage. This Icon will now open your website up in fullscreen.

Answer 2

I use a mix of the HTML meta tag for iOS and a JavaScript solution. It takes away the address bar on iOS and android devices. It does not take out the bottom bar on iOS as this will only disappear when the user installs the web page as a HTML5 app on his home screen.

<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>

I use PHP in the backend to only render the JavaScript for mobile browser with the following mobile browser detection

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

Answer 3

I do not think you will find a global solution for that since not everybody uses the default android webbrowser (e.g. I prefer dolphin).

Facing that fact you will need to try every dirty javascript hack to force that behavior.

The only reason why this works for apple devices is the fact that apple is very restrictive about developing a custom browser and everybody sticks to the default app.