iPhone 4 Retina “apple-touch-startup-image” for Web-apps

StackOverflow https://stackoverflow.com/questions/3795765

Question

This has been asked multiple times here, but without a solid and understandable answer. This is a web-app, not a native-app.

I'm using:

<link rel="apple-touch-startup-image" href="images/startup.png" />

to display the startup image. It loads fine if the image's resolution is 320x460. I tried using the retina's resolution which is 640x920 (40px are taken out by the status bar), that didn't work. I've tried the @2x thing, that failed too.

Is it even possible [yet]?

Was it helpful?

Solution

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.

    <!-- iPhone -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPhone (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPhone 5 -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPad Portrait -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPad Landscape -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

    <!-- iPad Portrait (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

    <!-- iPad Landscape (Retina) -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

OTHER TIPS

The documentation (found here) says:

On iPhone and iPod touch, the image must be 320 x 460 pixels and in portrait orientation.

I have tested providing different sizes, but the if the size is not exactly 320x460, the image is simply ignored. There is no clear statement from apple whether it is possible to include high res startup images, but forum posts (eg here: Apple Dev Forum) suggest that it is currently not possible.

Just did the testing... apple have added the "sizes" attribute. so, for hi-res, you add sizes="640x920", etc. I suppose this works for different orientation too.

This works for me:

<link rel="apple-touch-startup-image" media="screen and (max-device-width: 320px)" href="images/iphone_splash.png"/>
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone_splash_hires.png" />

So if I understand well, we actually need 8 different images considering we have 3 parameters to take into account:

  • Device (iPhone or iPad)
  • Resolution (retina or not)
  • Orientation (portrait or landscape)

Am I right?

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top