Making a mobile site behave like an iOS app

So you’ve created a nice, mobile-friendly website. But now you want it to seem a little more “app-like".

On iOS, you can create a icon on the home screen by using the “Add to Home Screen" button in Safari.

image

This nicely hides the browser toolbar at the top. Unfortunately the footer toolbar is still visible.

Here’s where the apple-mobile-web-app-capable meta tag comes in.

Adding the following meta-tag causes Safari to hide both toolbars and run in fullscreen mode.

~~~~ {.html name="code"} wzxhzdk:0