Geek Answers Handbook

Launch mobile webapp in full screen mode

I have the following problem:

I created a webapp using jQuery Mobile 1.2. Now I want to run this application in full screen mode without an address bar, toolbar, etc. I have already searched the Internet and found out that there are some meta tags to enable this mode:

<meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

It still works. But I also read that these tags are specific to iOS and will be ignored under Android. I thought that the framework should automatically switch the mode, but it does not work. Is there a special global variable that I have to manipulate, or a frame function to call or a script to enable?

Thanks in advance!

+4
source share
3 answers

You can use this javascript bit to hide the address bar in android:

 if(navigator.userAgent.match(/Android/i)){ window.scrollTo(0,1); }
+1
source

On your iPhone, open your webpage using Safari. Then click the sharing button (the one in the middle of the bottom panel).

Then click on the "home screen" button. It will create a bookmark on the main screen.

You just need to run it and you have your webapp.

Remember to add the code you provided in your question.

0
source

I managed to get this to work on chrome for Android:

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

More articles:


All Articles