1

We used the following meta tags to show a loading screen when someone loads our app from an iPhone, but when we tap on the home screen icon, only a white page appears. What else do we need to do to enable the loading screen?

The site is www.tekiki.com.

<link rel='apple-touch-icon-precomposed' href='/images/dandy/dandy_57.png' />
<link rel='apple-touch-startup-image' media='(device-width: 480px)' href='/images/dandy/loading_screen.png'>    
<link rel='apple-touch-startup-image' media='(device-height: 568px)' href='/images/dandy/loading_screen_iphone5.png'>
Crashalot
  • 33,605
  • 61
  • 269
  • 439

2 Answers2

0

I would guess that you don´t have the right sizes specified yet.

You can find a list of tags alread on SO in this post

I can´t test this right know, but you just might google apple-touch-startup-image to find usefull posts like this one and may have to combine a few of them.

This looks like a complete and besides quite fresh collection (from http://www.miguelmota.com/blog/iphone-and-ipad-web-app-startup-images/)

<!--iPhone and iPad Web App Startup Images -->

<!-- Do NOT use width=device width because it will letterbox viewport. -->
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

<!-- iPhone 3 and 4 Non-Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px)" href="apple-touch-startup-image-320x460.png">
<!-- iPhone 4 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 Retina -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

<!-- iPad Non-Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad Non-Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-748x1024.png">
<!-- iPad Retina Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-1536x2008.png">
<!-- iPad Retina Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 1536px)  and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-2048x1496.png">`
Community
  • 1
  • 1
luk2302
  • 55,258
  • 23
  • 97
  • 137
0

Viewing the html source code of www.tekiki.com for mobile devices I noticed two problems:

Here's a snippet of the current source code

<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='apple-touch-startup-image-320x460.png'>

<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x920.png'>

<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)' href='apple-touch-startup-image-640x1096.png'>

Problem 1

For the iPhone 4 and iPhone 5 link elements, the href values are incorrect and need to be prepended with '/images/dandy/'.

Problem 2

device-width doesn't appear to work as it should on the iPhone 4 and iPhone 5. max-device-width should be used instead of device-width.

Test code

Here's my test html code that I got working on a iPhone 4S (I haven't tested any other iPhone models):

<!-- iPhone 3 and 4 Non-Retina -->
<link rel='apple-touch-startup-image' media='(device-width: 320px)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-320x460.png'>

<!-- iPhone 4 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width: 480px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x920.png'>

<!-- iPhone 5 Retina -->
<link rel='apple-touch-startup-image' media='(max-device-width : 548px) and (-webkit-min-device-pixel-ratio : 2)' href='http://www.tekiki.com/images/dandy/apple-touch-startup-image-640x1096.png'>

An excellent blog post that you may find useful is: http://stuffandnonsense.co.uk/blog/about/home-screen-icons-and-startup-screens

Edit:

The iPhone 4S was loading the 320px loading screen instead of the 640px picture. So I have updated the html markup.

AshleyS
  • 2,191
  • 2
  • 20
  • 23
  • for some reason the 320x460 image is getting shown instead of the 640x920. any clue why? – Crashalot Jul 29 '13 at 17:58
  • setting device-width to 320px did the trick. that's the only thing incorrect about this solution. you're saying 640px worked in your testing? – Crashalot Jul 29 '13 at 18:00
  • Actually, you're right. The 320px loading screen is being used by the iPhone 4S, not the 640px. I removed all the link elements but the iPhone 4 link, and I got a white loading screen. – AshleyS Jul 30 '13 at 00:42
  • I have updated the answer with the correct markup. Once again, I haven't tested it on the iPhone 5. – AshleyS Jul 30 '13 at 01:01
  • for the record, we set the iphone 4 retina device to a device-width of 320 (rather than max-device-width) while using the pixel ratio to differentiate from the non-retina version. – Crashalot Jul 30 '13 at 07:14