Game Development Reference
In-Depth Information
and (orientation: landscape)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone 5 -->
<link href="webapp/apple-touch-startup-image-640x1096.png"
media="(device-width: 320px) and (device-height: 568px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 & 7 iPhone (retina) -->
<link href="webapp/apple-touch-startup-image-640x920.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 2)"
rel="apple-touch-startup-image">
<!-- iOS 6 iPhone -->
<link href="webapp/apple-touch-startup-image-320x460.png"
media="(device-width: 320px) and (device-height: 480px)
and (-webkit-device-pixel-ratio: 1)"
rel="apple-touch-startup-image">
Much like the icon, several variations of the startup image must be created. Because of the variety of resolutions
and ratios on iOS screens, the startup image cannot simply be created large and scaled down for each case. Another
important thing you'll notice is that landscape startup images do not have landscape resolutions. This is because
iOS will simply rotate your image in the case of a device in landscape mode; therefore you should prep your images
at landscape, but rotate 90 degrees when saving for production. Figure
12-6
shows the startup image prepped for the
retina iPad.
Figure 12-6.
The startup image displays while the app is loading
