20

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]?

skaffman
  • 398,947
  • 96
  • 818
  • 769
a79ce734e1
  • 865
  • 4
  • 12
  • 23
  • I found this as an anwser, I will test tomorrow. http://stackoverflow.com/questions/3707509/startup-image-in-webapp-for-retina-display – Savageman Sep 30 '10 at 16:37
  • I'm the one who posted the answer in that thread, and we determined it's NOT the answer--I thought he was asking about a native app, not a web app. The @2x thing is for native apps. I don't have a solution for you for web apps. – Dan Ray Oct 04 '10 at 12:57

5 Answers5

12

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.

adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • I don't think the above works for the retina start up images, having just tried myself. Also, you have the dimensions wrong for the startup images - they are 320x460 and 640x920 respectively – bitwit May 30 '12 at 18:40
  • The dimensions above are correct, and the code works perfectly in all the mobile apps I have developed. – adamdehaven May 31 '12 at 14:14
  • Yea, your dimensions are corrected now. I used this tag for retina. The one above seemed to cause a clash on non-retina splash screens :S – bitwit May 31 '12 at 14:35
  • 1
    Worked great for me with the retina iPad. – Bernesto Jan 30 '13 at 23:07
6

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.

Jakob Egger
  • 11,981
  • 4
  • 38
  • 48
5

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.

dikai
  • 51
  • 1
  • 1
  • 1
    For more info, I found this article (the interesting part is at the end of the article) http://www.webdesignne.ws/2011/04/11/5-meta-tags-for-making-your-website-an-ios-web-app/ – Jakob Egger Apr 22 '11 at 06:57
  • Haven't tested orientation, but the sizes attr (for Retina) just worked for me on iOS5. – David Kaneda Oct 19 '11 at 23:18
0

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" />
Robot Woods
  • 5,677
  • 2
  • 21
  • 30
0

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?

Vinch
  • 1,551
  • 3
  • 13
  • 15