Full Screen Android Web App

Question

I want to run my web application, which I programmed with HTML5, in full screen on Android. (hide status bar and address / 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 this did not work on Android.

There are many solutions with Javascript, but all the solutions I tried do not work.

Does anyone know a solution?

Answer 1

I don’t think you will find a global solution for this, since not everyone uses the default Android web browser (for example, I prefer dolphins).

Given this fact, you need to try every dirty javascript hack to force this behavior.

The only reason this works for apple devices is the fact that the apple is very restrictive about developing a custom browser, and everyone sticks to a standard application.

Answer 2

This worked for me in Chrome for Android.

Add this to the header tags:

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

Then, from the Chrome browser menu, select Go to homepage. This icon will now open your site in full screen.

Answer 3

I use a combination of the HTML meta tag for iOS and the JavaScript solution. It removes the address bar on iOS and Android devices. It doesn’t take out the bottom panel in iOS, as it will disappear only when the user sets the web page as an HTML5 application 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 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 only to display JavaScript for the mobile browser with the following mobile browser detection

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

Answer 4

You can achieve this with the googles of a new progressive web application that adds a service worker. Take 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 an icon to the desktop for your web browser, get full screen mode, use push notification, etc.

Answer 5

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

This tag is designed to display a chrome-free environment after adding your site to the iPhone home screen.

I would not rely on this to work on Android.

To have the browser bar scroll from the path as soon as your page loads, answer this question: Removing the address bar from the browser (for viewing on Android)

Answer 6

As indicated by google

With Chrome M31, you can configure your web application to have a shortcut icon added to the device’s home screen and launch the application in full-screen mode using Chrome for androids. Add to homecreen. "

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

Answer 7

This code may help ...

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

Answer 8

On the Android side and for versions below cellular , this should be done using:

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

If the Android browser doesn’t do something like this when it reads meta-information, I would try to find phonegap to check to solve this problem.