How do they do this - Mobile Site Added to Homescreen Appears as Standalone App

Question

So I\'ve only seen one website do this and I\'m very curious to know how they do it. I\'m using an iPhone 4 with iOS5 by the way.

Go to http://m.funnyordie.com/ (Will Fe

Answer 1

It's called a Web Clip and if you specify some meta data in your html you can have it appear on the home screen with an icon

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html

To add an icon:

<link rel="apple-touch-icon" href="/custom_icon.png"/>

To have a startup image:

<link rel="apple-touch-startup-image" href="/startup.png">

To hide the navigation bar:

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

To change the status bar appearnace:

<meta name="apple-mobile-web-app-status-bar-style" content="black" />

Answer 2

Also for information it seems they are using jQueryMobile pretty heavily (jquerymobile.com) which I think can do a lot of all that for you.