0

I've read countless threads, blog posts, and other documentation online about this, yet I cannot get it to work. I've spent hours researching this and trying different things.

I'm trying to get a splash screen image to show for a web app on the iPad 2. I'm not even concerned with the iPad 3 resolution yet.

These are the tags that I have:

<link href="images/splash_748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup_image">
<link href="images/splash_768.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image">

splash_748.png is 748x1024

splash_768.png is 768x1004

The portrait mode splash screen works just fine. The landscape version will not show. Does anyone have any ideas? I've tried over a dozen different ways to do this. None of them have worked.

I've been deleting the app and clearing Safari's cache each time I make an update. Then I go back to the web page and send it to the home screen. This seems to pick up changes in the images, so I can't imagine it's caching anything else.

Dan
  • 395
  • 1
  • 4
  • 6

2 Answers2

3

Your code has a mistake in it. Look at the end of the first line 

rel="apple-touch-startup_image"

it should be 

rel="apple-touch-startup-image"

notice the _ should be a -

Edit: Heres my code for iOS web apps - covers most eventualities and seems to work on most devices but don't hold me to it :)

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

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

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" sizes="1024x748" href="images/ios/ipad-startup-1024-748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 1)" />

<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" sizes="768x1004" href="images/ios/ipad-startup-768-1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 1)"/>

<!-- iPad (high-resolution Landscape – 2048 x 1496 pixels ) -->
<link rel="apple-touch-startup-image" sizes="2048x1496" href="images/ios/ipad-startup-2048-1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- iPad (high-resolution) Portrait – 1536 x 2008 pixels -->
<link rel="apple-touch-startup-image" sizes="1536x2008" href="images/ios/ipad-startup-1536-2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" />

<!-- iOS Icons -->
<link rel="apple-touch-icon" href="images/ios/icon-57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="images/ios/icon-72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="images/ios/icon-114.png" />
<link rel="apple-touch-icon" sizes="144x144" href="images/ios/icon-144.png" />
dopey
  • 496
  • 1
  • 6
  • 19
1

This is how I do it:

<link rel="apple-touch-startup-image" sizes="1024x748" href="Default-Landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" />
Robot Woods
  • 5,677
  • 2
  • 21
  • 30
  • Yeah, I tried that and it doesn't work. ` ` – Dan Jun 27 '12 at 19:25
  • have you tried moving the image to the root folder? I recall reading that somewhere (obviously it's not always required since your portrait view works, but might be worth a shot) – Robot Woods Jun 27 '12 at 19:26
  • I'll try that next. I do have the image sizes correct, don't I? The landscape image is 748x1024 (basically the same image, 20 pixels moved to account for the status bar, and rotated 90 degrees clockwise). – Dan Jun 27 '12 at 19:28
  • well you rotate the content of the image, but not the image, right? so it's still taller than it is wide. numerically you are correct in sizes, but I just want to make sure 7** is the width for both – Robot Woods Jun 27 '12 at 19:30
  • Yes, I have the content rotated. Both are 7** pixels wide. Moving the images to the root of the site did not fix the issue. Still only working for portrait. – Dan Jun 27 '12 at 19:34
  • another shot in the dark, but what if you swap the tag order? or try this post that has gotten some upvotes: http://stackoverflow.com/questions/4687698/mulitple-apple-touch-startup-image-resolutions-for-ios-web-app-esp-for-ipad – Robot Woods Jun 27 '12 at 19:38
  • I've tried swapping the tag order. I've also been through everything posted in that post. I spent over an hour going through that post earlier. Thanks though. Seems like I'm not crazy after all. – Dan Jun 27 '12 at 20:43
  • How odd. I think I would re-examine the file itself if none of these 'known' solutions are working for you...I had a client send me graphics a few times that would be re-sized by iPhoto...maybe your file has been subtly modified? can you post a link to your image? – Robot Woods Jun 27 '12 at 23:52