Home/ Questions/Q 7581827
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-30T18:17:20+00:00

I’m doing a Sencha Touch web app with splash screens specified as follows. The

  • 0

I’m doing a Sencha Touch web app with splash screens specified as follows. The images are 640×920 and 320×460 respectively (allowing for the statusbar and following an example from Sencha).

<link rel="apple-touch-startup-image" media="screen and (resolution: 326dpi)" href="/resources/img/startup_640.png" />
<link rel="apple-touch-startup-image" media="screen and (resolution: 163dpi)" href="/resources/img/startup.png" />

However, on an iPhone 4, I’m still seeing only the low resolution image. (To make things easy, I’ve embedded the text “640×920” and “320×460” in the appropriate image to be sure I’m looking at the right images.)

I keep clearing the Safari cache and reloading the app, but the wrong image continues to load.

Just to make sure I had them right, I switched the links to point to the opposite files, but then as expected, neither splash loaded.

Any other suggestions?

EDIT:
Similarly, the apple-touch-icon-precomposed is loading the smaller of the two as well.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    • 0