Oct 7, 2008
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 wrote about it, with a fantastic demo available on the website of the WebApp.net framework.
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:
-
<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.
neat - thanks for sharing