Make web apps act more native

With a simple trick you can make a web-based app look and act more native on an iPhone or iPod Touch.

Adding the following tags to your <HEAD> will make your application open in full screen and hide Safari’s toolbars. In addition, if you add it to your home screen, it will appear to open without Safari and no page will be added to Safari.

<meta name="viewport" id="viewport" content="width=device-width,user-scalable=no,minimum-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" />

The following tags, which should also be added to <HEAD>, will provide an icon for the home screen and a splash screen to be displayed when it opens.

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

The first application I’ve seen which uses this trick is Fever.

Leave a Comment