I have a web app which runs in full screen mode on iOS via a Home screen shortcut.

When the iPhone 5 came out, it turned out that it doesn’t quite use the whole screen on it. Instead, when started on an iPhone 5, the app is formatted for iPhone 4 screen size, with black bands above and below (or left & right in landscape mode).

I don’t know if this is an intentional change or a bug, but I needed the app to use the whole screen in any case.

The fix (which I found here) is quite simple. I just had to remove width=device-width from the viewport meta tag, leaving only this:

<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

I’ve tested the app on iPhone 4S, iPad 2 and iPad 3 in addition to iPhone 5, and the updated viewport statement doesn’t seem to cause any adverse effects on those devices.

In addition, iPhone 5 requires a separate splash screen image because of its higher vertical resolution. The screen is 640x1136px so the image needs to be 640x1096px. It can be distinguished with a media query like this:

<link rel="apple-touch-startup-image" href="images/iPhone@1096.png" 
    media="screen and (max-device-width: 320px) and (device-height: 568px)">