The iPhone 5’s screen is 1136 pixels tall and the status bar takes up 40 pixels on retina devices. That means old startup images won’t work because they’re the wrong resolution. The source for this page is available on GitHub. To match the iPhone 5 with media queries, use the reported device resolution of 320x568. http://pixelzs.com/not-working/iphone-4-touch-screen-not-working-after-screen-replacement.html
Unlike native apps, web apps aren’t letterboxed. The iPhone 5 still requests them but it just shows a blank white page on launch. That means 640x1096 is the right resolution. 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.
It’s also available a Gist. It also has a -webkit-device-pixel-ratio of 2, just like all other retina devices. 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"the iPhone 5, which is taller than previous iPhones.
taylor.fausak.me iPhone 5 web app startup image by Taylor Fausak on September 20, 2012 Update: iOS 7 Web Apps I wrote about icons Hello, OrgSync! → Content on this site is licensed under a Creative Commons Attribution 4.0 International license. So what is the correct resolution? Apple-touch-startup-image Iphone 6 Fortunately it’s a piece of cake to add iPhone 5-compatible startup images to a web app.
Notes I made the media queries overly specific to avoid the problem of iPhone 5s downloading images and then discarding them. Apple-touch-startup-image Not Working Please let me know if you notice any problems or want to suggest an improvement. To set the proper scale and avoid letterboxing, set the viewport’s initial scale to 1.0. (Thanks to Max Firtman for this solution.) http://stackoverflow.com/questions/30629160/ios-web-app-splash-screen-not-loading