Building a site that you want to be a web app on an iPhone, iPad, or iPod Touch?

Full Screen Detection:

Consider this meta tag:

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

If you add this to your Mobile Safari web page your page will open in full screen mode…  IF you added your page as a shortcut to your Home screen and IF you launched it from that shortcut! Otherwise if you open the page from the standard mobile Safari icon it will not be in full screen!

You might have seen how some sites have a popup balloon that points to the    button with a message on how to add to the Home screen. The popup only shows up when your not in full screen mode. How do they do this?

Mobile Safari has the following property:

window.navigator.standalone

If this property is true, we are in full screen. False, we are not in full screen!

Consider adding to your JavaScript function called by the page’s onload event something like the following:

if ("standalone" in window.navigator && !window.navigator.standalone) {   
   // code here to create a div displaying our help balloon and positioning it
   // properly on the screen.
} // end if 

Recommended Post:

Do you want to look into this subject in more detail? Ben Nadel has written an excellent post on his blog: Detecting iPhone’s App Mode (Full Screen Mode) For Web Applications.

A JavaScript Library:

Looking for  a JavaScript library that you can add to your project to do the work for you? Matteo Spinelli on his site cubiq.org has created one for you. Go to his Add to Home Screen page to find out all the details. He’s even got a QR barcode that you can use with your iPhone to test it out!

If you go to the test page on your iPhone in Mobile Safari it will do this little balloon animation on the screen where it slides from the top down so    that it ends up pointing at the  button (see screen shot below):

The JS Library is downloadable for free but Matteo will take donations via PayPal or Flattr.

Code. I have to say I downloaded the library and looked at the code. Matteo put a lot of effort into this thing. it supports multiple languages and does all sorts of fancy stuff! Enough said.