Startup image in webapp for Retina display?

问题:

Anybody know how to get iOS to display higher resolution startup image when using ? Currently I'm stuck with 460x380 image which obviously looks horrible when displayed on iPhone 4's high dpi display. I tried the @2x trick but didn't seem to work.

Any ideas or workarounds?

回答1:

I didn't ever think I would get this working, but for some reason, everywhere online states that the hi-res images dimensions are 640x960, they are actually 640x920. When you make this change, the hi-res splash screen will appear correctly on retina displays. Below is the exact code that I use in our app. We have splash screens working on iPad1/iPad2 Portrait and Landscape, iPhone3/iPhone4

Hope this helps someone.

  <!-- iOS Device Startup Images -->
<!-- iPhone/iPod Touch Portrait – 320 x 460 (standard resolution) -->
<link rel="apple-touch-startup-image" href="splash-screen-320x460.png" media="screen and (max-device-width: 320px)" />

<!-- iPhone/iPod Touch Portrait – 640 x 920 pixels (high-resolution) -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="splash-screen-640x920.png" />

<!-- For iPad Landscape 1024x748 -->
  <!-- Note: iPad landscape startup image has to be exactly 748x1024 pixels (portrait, with contents rotated).-->
<link rel="apple-touch-startup-image" sizes="1024x748" href="splash-screen-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />

<!-- For iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="splash-screen-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)"/>

回答2:

Have you tried using media queries related to pixel ratio on the link tag?

media="only screen and (-webkit-min-device-pixel-ratio: 2)" for the retina display one.

回答3:

iPad:

link rel="apple-touch-startup-image" sizes="768x1004" href="" /
iPhone Retina Display: link rel="apple-touch-startup-image" sizes="640x960" href="" /

回答4:

I've seen cases where XCode messes up in this situation. In addition to double checking the image size, (320x460) it doesn't hurt to:

1. Make sure both images are in the build. (Right/Option click on the files header and select "target membership" and then make sure the checkbox is checked.)
2. Do a clean build.
3. Delete all of the build files in your build directory. (Clean doesn't get ALL of them.)
4. Delete the app from the target phone/sim.

I know this may seem obvious or unnecessary, but I banged my head against the same problem and the clean/delete/delete sequence fixed it.

回答5:

The "@2x" trick works. Must have been something wrong with your images.

You want two files. Default.png and [e-mail]. The first one should be 320x460. The second should be 640x920. I promise it works.