How to Make a Full-Screen iPhone Web App

There has been a fair amount of talk lately about a feature introduced in iPhone firmware 2.0 and above that allows a developer to make a web application, once saved to a user’s iPhone home screen, run in a full-screen mode without the Safari toolbars. AppleInsider viagra online australia, with a fantastic demo available on the viagra no prescription.

While there has been a lot of talk about the result of this technique, I haven’t seen anywhere that describes exactly how to make your application run full-screen (sans buried deep in the Apple Developer Connection documentation). It’s actually incredibly simple, just add the following code into the <head> of your site:

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

Once you’ve done this, when someone saves your application to their home screen it will subsequently start without the Safari chrome. Make sure that if you do this your application has adequate navigation and plenty of feedback during loading, as users won’t be able to use the Safari back/forward buttons nor see the standard loading bar.

  • http://www.romant.net/ Roman Tarnavski

    neat – thanks for sharing

  • http://www.unitid.nl Matthijs

    Thanks, I have used this info for creating simple prototypes using Adobe Fireworks. Check out the result: http://unitid.nl/2009/04/prototyping-for-the-iphone-using-fireworks-cs3/

  • http://www.pantsland.com Brad Kellett

    Thanks, that’s a really great article. Would have been nice if you had linked back, but none the less, very handy.

  • http://www.iphone-ticker.de/2009/12/29/offline-mit-icon-und-im-vollbild-tipps-fur-den-entwurf-eigener-web-applikationen/ iFUN.de/iPhone :: Alles zum iPhone − Offline, mit Icon und im Vollbild: Tipps für den Entwurf eigener Web-Applikationen

    [...] und ohne die sonst angezeigten Bedienelemete des Browsers, arbeiten können soll. Bradkellett erklärt den richtigen Einsatz des Tags in seinem Blog – Ajaxian die zusätzlich verfügbaren Optionen. Entscheidet man sich für [...]