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?

score 51 · Answer 1 · answered Jul 20 '14 at 07:24

51

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.

answered Jul 20 '14 at 07:24

jason

1,132
14
32

It's nice solution. This way the user has application like environment. But would be better is if there a google play way to do it. – ton Jun 02 '15 at 22:48
notification bar is there but address bar gone with this – Iftikar Urrhman Khan Jun 10 '16 at 12:46
Perfect for what I needed to do without any hacky hacks! – Dean Meehan Apr 17 '17 at 19:24

score 10 · Answer 2 · answered Jun 27 '12 at 07:39

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'])))

Is this works for Android Tablets? I tried with the code but its not working form me.I am using chrome browser in device samsung tablet android version 4.0.4. — sureshunivers, Jan 22 '13 at 08:52
@ton if you find a solution would be great if you update the answer. Thanks — philipp, Jun 03 '15 at 18:39
never seen that. I posted this 2012 when I had that problem. — philipp, Jun 04 '15 at 00:23

score 3 · Answer 3 · answered Aug 23 '16 at 09:43

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.

score 3 · Accepted Answer · edited Mar 26 '12 at 07:18

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.

edited Mar 26 '12 at 07:18

Code Lღver

15,573
16
56
75

answered Sep 22 '11 at 15:42

Knickedi

8,742
3
43
45

okey... But for the default android webbrowser ? How works it for that? – user959456 Sep 22 '11 at 15:46
To be honest, I never tried that and would have to research that. I saw something like "let the page scroll a pixel, then it goes away" – Knickedi Sep 22 '11 at 15:47
see my solution, works great for me across different browsers in android and iOS – philipp Jun 27 '12 at 07:40

score 1 · Answer 5 · answered Oct 03 '15 at 21:40

As indicated by Google

Since Chrome M31, you can set up your web app to have an application shortcut icon added to a device's homescreen, and have the app launch in full-screen "app mode" using Chrome for Android’s "Add to homescreen" menu item.

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

score 1 · Answer 6 · edited May 23 '17 at 12:03

1

<meta name="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)

edited May 23 '17 at 12:03

Community

1
1

answered Sep 22 '11 at 16:27

m6tt

4,223
1
22
20

1

This works perfectly in android, but I'd suggest to use a manifest (it gives more customization options) http://updates.html5rocks.com/2014/11/Support-for-installable-web-apps-with-webapp-manifest-in-chrome-38-for-Android – Luis Sieira Sep 19 '15 at 21:34

score -8 · Answer 7 · answered Sep 22 '11 at 15:44

-8

From the Android side and for versions lower than honeycomb, 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 that when it reads the meta info, I would try looking into phonegap to check if they solve this issue.

answered Sep 22 '11 at 15:44

Macarse

91,829
44
175
230

5

It is an WEB-App (HTML5) Not a Native App – user959456 Sep 22 '11 at 15:47
@user959456: Plz, read my complete answer. That lines are what the browser should do when the metadata is read. If the default browser is not doing that I recommend you to check is phonegap solved this. – Macarse Sep 22 '11 at 16:22

score -8 · Answer 8 · edited Oct 26 '12 at 04:53

-8

This code might help...

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

edited Oct 26 '12 at 04:53

wattostudios

8,666
13
43
57

answered Mar 25 '12 at 16:38

user1251064

35
10

2

See the post below, its not about a native app! – theomega Mar 25 '12 at 21:30
1

@user1.251064 although the downvotes suggest unpopularity, they don't give any clue as to why ...so: Maybe there's confusion between "web app" (runs in the browser) and "native app" (usually obtained from the app store). Web Apps use HTML/HTML5 and CSS and Javascript ...but not any form of Java (at least not 99% of the time:-). Web Apps do not have direct access to the native SDK. A good rule of thumb is if it's in Java, it's relevant only to native apps not to web apps. – Chuck Kollars Apr 26 '13 at 20:50

Fullscreen Web App for Android

8 Answers8

Linked