Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How do you keep an iPhone/iPad web app in full screen mode?

I have an HTML5 iPad app that works offline. The app essentially consists of 4 html files and 3 aspx files. My cache manifest is setup so that only the html files are available offline, and the aspx files require a network connection. This is all working great!

Now, I've gotten to the point where I'm putting the finishing touches on the app and trying to finalize the home screen icons, running in full screen mode, etc. I've added what I believe are the necessary meta tags to make the app initially launch in full screen mode once it's been added to the home screen. The reason I believe the tags are correct is that the app will (correctly) launch and stay in full screen mode if I navigate back and forth between the html pages. The problem I'm having is getting the app to stay in full screen mode when one of the server (aspx) links are clicked.

When a server link (aspx) is clicked Mobile Safari kicks out into full browser mode and opens a new window. This behavior is not acceptable and I'm hoping that I'm missing something simple here.

Here are the meta tags I'm using on all of my pages (html + aspx):

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

Hopefully this provides all of the necessary information needed to understand the problem. I have seen other links on here stating that ANY page other than the one bookmarked on the home page causes some folks to exit full screen mode. This is not the problem I'm having, so I wanted to start a new discussion. Again, I feel that if I had 5 more html pages in the app it would continue to stay in full screen mode. The aspx pages are the problem in my situation.

like image 815
Don Avatar asked Jun 21 '11 17:06

Don


People also ask

How do I expand a Web page to full screen on iPad?

Whichever your video app supports, you can view it full screen by tapping the icon that looks like two arrows pointing in opposite directions. If you're viewing the video picture-in-picture, tap the right-corner icon showing two squares with one that has an arrow in it.

How do I change Safari back to full screen on iPad?

The method for how to go back to full screen on iPad from the Safari split screen is the same as before—simply tap and drag the black divider bar to one side of the screen or the other.


1 Answers

Let the computer do the tedious job, that's what they're made for.

This is a piece of javascript code I use to avoid rewriting all my links. With that, only those links that have an explicit target = "_blank" attribute will open in Safari. All other links will remain inside the web app.

var a=document.getElementsByTagName("a"); for(var i=0;i<a.length;i++) {     if(!a[i].onclick && a[i].getAttribute("target") != "_blank") {         a[i].onclick=function() {                 window.location=this.getAttribute("href");                 return false;          }     } } 
like image 77
KPM Avatar answered Sep 21 '22 07:09

KPM