How to make web apps use the full screen on iPhone 5

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:


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: