iPhone 5 Web App Startup Image
I wrote about icons and startup images for iOS web apps a while ago. Apple just released the iPhone 5, which is taller than previous iPhones. Fortunately it’s a piece of cake to add iPhone 5-compatible startup images to a web app.
Unlike native apps, web apps aren’t letterboxed. That means old startup images won’t work because they’re the wrong resolution. The iPhone 5 still requests them but it just shows a blank white page on launch.
So what is the correct resolution? The iPhone 5’s screen is 1136 pixels tall and the status bar takes up 40 pixels on retina devices. That means
640x1096 is the right resolution.
To match the iPhone 5 with media queries, use the reported device resolution of
320x568. It also has a
2, just like all other retina devices.
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">
I made the media queries overly specific to avoid the problem of iPhone 5s downloading images and then discarding them. It’s possible to make the media queries a little simpler by only specifying the
device-height, but I don’t think that optimization is worth it.
Web apps can be letterboxed, but only if their viewport’s width is set to either
320. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to
1.0. (Thanks to Max Firtman for this solution.)
<!-- Letterboxed on iPhone 5 --> <meta name="viewport" content="width=device-width"> <meta name="viewport" content="width=320"> <!-- Not letterboxed on iPhone 5 --> <meta name="viewport" content="initial-scale=1.0"> <meta name="viewport" content="width=320.1">