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

Question

Hope this question hasn't been asked before.

I've got the following working

<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone4-portrait.jpg" />

i'm aware that the image has to be 640x920 else it will not work
i know that there is no Landscape option for this? or is there?

So...on to my issue, when loading the web app from the home screen in Landscape you can see the page content behind the splash screen (lighter green area in the landscape image below), where the states bar was in portrait

Has anyone out there had this issue, if so how are you getting around it.

Thanks

Answer 1

You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.

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.

iPad Landscape – 1024 x 748

<link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

iPad Portrait – 768 x 1004

<link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)

<link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)

<link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

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

Answer 2

Getting these to work is an utter nightmare.

On git hub (https://gist.github.com/472519) it says the retina should be <link rel="apple-touch-startup-image" media="screen and(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="apple_launch_640x920.png" /> - and everybody says it should be the exact size or it won't work yet everybody says different sizes.

On top of that apps seem to cache (maybe not now in iOS5.1 but I am not sure) so you don't have any way of knowing if you have done it right or not if you didn't get it right first time.

I REALLY REALLY REALLY wish Apple would post up code on its dev info somewhere with the definitive answer to this (including iPad Retina) so we could just treat this as the 10minute job it should be rather than wasting hours and hours and hours messing around...:(

I have found the following works on iPad 2 at least- the iPad2 landscape version is actually portrait with the content rotated, so make the landscape version (748x1024) and then rotate 90 CLOCKWISE and you will be good to go.

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

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

What to do with the rest though I dont know, I don't have an old iphone or a retina ipad, and this is all so flakey whether any of it works is anyones guess...

Answer 3

There is no landscape launch screen spec for the iPhone. This is because the iPhone does not rotate its home screen when the device is sideways -- users will always be launching from portrait orientation.

If you insist you need this however, you could just have your regular launch screen be sideways, suggesting to the user they need to turn their phone around.