Fullscreen Web App For Android

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

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

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

<metaname="apple-mobile-web-app-capable"content="yes" /><metaname="viewport"content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/><scripttype='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'])))

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

Solution 4:

You can achieve this with googles new progressive web app adding the service worker. Have a look here: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/ and https://developers.google.com/web/progressive-web-apps/ .

You can add icon in homescreen for your webapp,get fullscreen, can use push notification etc.

Solution 5:

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

This tag is designed to show a chromeless environment after you have added your site to the iPhone's home screen.

I wouldn't rely on this to work for android.

To make the browser bar scroll out of the way once your page has loaded see this question's answer: Removing address bar from browser (to view on Android)