Multiple apple-touch-startup-image solutions for an iOS web application (especially for an iPad)?

Question

I wrote an HTML5-based iOS web application and everything seems to work fine, but I'm trying to polish it with multiple launch screens. The iPhone / iPod touch works well with PNG 320x460, as shown below:

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

I found a lot of documentation saying that boot images for the iPad should, like iPhone / iPod touch, have 20px shaved from a height in order to place a resolution of 768x1004 (portrait) or 1024x748 (landscape) in the status bar, However, in my testing (currently with an iPad running iOS 3.2.2) only the resolution 768x1004 (portrait) works (but it’s wrong - 20 pixels is too narrow - in landscape mode).

I tried the following (a wild guess based on the link functionality of apple-touch-icon ), to no avail:

 <link rel="apple-touch-startup-image" href="img/startup_screen-320x460.png" /> <link rel="apple-touch-startup-image" sizes="1024x748" href="img/startup_screen-1024x748.png" /> <link rel="apple-touch-startup-image" sizes="768x1004" href="img/startup_screen-768x1004.png" /> 

Only an image with a resolution of 768x1004 works if it contains the last link element. If the image with a resolution of 1024x748 is the last, a gray background is displayed instead (but never 768x1004). Thus, it is obvious that apple-touch-startup-image link does not support the sizes attribute.

Is this supported in newer versions of iOS? Is there a way to support multiple boot images? Should I create a boot image of 1024x768? If so, will it be reduced for iPhone / iPod touch? Or, should I just give up and not have a boot image for the iPad?

Answer 1

final solution for startup-image and touch-icons for iPad and iPhone (landscape || portrait) and (retina || not):

  <!-- iPhone ICON --> <link href="apple-touch-icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- iPad ICON--> <link href="apple-touch-icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iPhone (Retina) ICON--> <link href="apple-touch-icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- iPad (Retina) ICON--> <link href="apple-touch-icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iPhone SPLASHSCREEN--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (portrait) SPLASHSCREEN--> <link href="apple-touch-startup-image-768x1004.png" media="(device-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image"> <!-- iPad (landscape) SPLASHSCREEN--> <link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image"> <!-- iPad (Retina, portrait) SPLASHSCREEN--> <link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (Retina, landscape) SPLASHSCREEN--> <link href="apple-touch-startup-image-2048x1496.png" media="(device-width: 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> 

Answer 2

I really got it to work in landscape mode. I got the information here: https://gist.github.com/472519 .

The problem is that the landscape image should be 748x1024 (horizontal image on the side, I rotated clockwise) instead of 1024x748.

I also had to start the application in portrait mode first, and then in landscape mode.

Answer 3

I just wanted to offer a combination of answers that really worked. We found that with the answer chosen, retina versions of the spray images were not used. Pavel answered, corrected the retina version for iPad. The following has been tested on iPhone (retina and not retina) and iPad (retina and not retina).

 <!-- For third-generation iPad with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="144x144" href="apple-touch-icon-144x144-precomposed.png"> <!-- For iPhone with high-resolution Retina display: --> <link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png"> <!-- For first- and second-generation iPad: --> <link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png"> <!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: --> <link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png"> <!-- iPhone SPLASHSCREEN--> <link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image"> <!-- iPhone (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 460px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPhone 5 (Retina) SPLASHSCREEN--> <link href="apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iPad (non-Retina) (Portrait) --> <link href="apple-touch-startup-image-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" rel="apple-touch-startup-image" /> <!-- iPad (non-Retina) (Landscape) --> <link href="apple-touch-startup-image-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Portrait) --> <link href="apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Landscape) --> <link href="apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> 

I can’t get a loan for all this, but this configuration works. Just copy and paste, make sure that the images exactly match the sizes indicated in their names.

Answer 4

If one link element was missing, the media content properties did not work for me. The code successfully displayed the launch image on the iPhone 3G and iPad (portrait and landscape mode).

 <-- iPad - landscape (748x1024) --> <link rel="apple-touch-startup-image" href="images/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> <-- iPad - portrait (768x1004) --> <link rel="apple-touch-startup-image" href="images/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /> <-- iPhone - (320x460) --> <link rel="apple-touch-startup-image" href="images/iphone-lowres.png" media="screen and (min-device-width: 200px) and (max-device-width: 320) and (orientation:portrait)" /> 

Failed to try it for iPhone4 (high res), but most likely it works the same.

Answer 5

Apparently, the launch screen only works under the following conditions:

1) there must be the exact size required by the device. 2) when starting the application, the device should be in portrait orientation. 3) some sources say only png, but jpg now works.

Answer 6

The most complete solution: https://gist.github.com/tfausak/2222823

Answer 7

It took some time to figure out how to create a screensaver for the new iPad (Retina), here is my test and working solution for orienting the new iPad (Retina).

PS Before publishing this, I already tested the solutions already provided, and they did not work.

 <!-- iPad (Retina) (Portrait) --> <link href="/img/ios/apple-touch-startup-image-1536x2008.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> <!-- iPad (Retina) (Landscape) --> <link href="/img/ios/apple-touch-startup-image-2048x1496.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) and (-webkit-min-device-pixel-ratio: 2)" rel="apple-touch-startup-image" /> 

Answer 8

This may be obvious to some, but the launch image will not work for me unless I added that I added a shortcut to the main screen, launched it from there and had the following code:

 <meta name="apple-mobile-web-app-capable" content="yes" /> 

This page was useful for identifying all of this: http://lineandpixel.com/blog/ios-web-app-icons-and-startup-images

Answer 9

As I was able to get 4 separate boot images for WebApps on iPhone / iPad / iPhoneRetina, there was a combination of several things ...

Not Retina iPhone (320x460):

  <link rel="apple-touch-startup-image" href="startup-iphone.jpg" /> 

Retina iPhone (4 and 4S) (640x920): Use the Javascript technique published above. http://www.paulofierro.com/archives/568/

iPad (both orientations) is difficult. The landscape should be 748w x 1024h, and the "bottom" - left. The portrait should be 768w x 1004h and the bottom should be the bottom. I had to enable the iPad tags via PHP, having detected the iPad in the User Agent, otherwise the iPhone boot image other than Retina would not load. Here is the code ...

  <?php $isiPad = (bool) strpos($_SERVER['HTTP_USER_AGENT'],'iPad'); ?> <?php if ($isiPad) { ?> <link rel="apple-touch-startup-image" href="startup-landscape.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /> <link rel="apple-touch-startup-image" href="startup-portrait.jpg" media="only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" /> <?php } ?> 

Doing the above allows my webapp (actually the simple wordpress blog blog currently working on it offline) to have a boot image for the iPhone, Retina and both iPad orientations. Tested on iPhone 3G with the latest iOS 4, iPad and iPhone 4 running on the latest version of iOS 5.

Of course, you can also include iPad code through javascript. lol

Answer 10

I tested many times, now I am sure that it works when you act as follows: first, keep your site in the portrait, open the application, then keep the application in your own way, open the application. sucks, but ... it seems this is the only way to do this. you must first hold your pad portrait to “unlock” the error.

Answer 11

Finish meta:

 <!-- Icons --> <!-- iOS 7 iPad (retina) --> <link href="icon-152x152.png" sizes="152x152" rel="apple-touch-icon"> <!-- iOS 6 iPad (retina) --> <link href="icon-144x144.png" sizes="144x144" rel="apple-touch-icon"> <!-- iOS 7 iPhone (retina) --> <link href="icon-120x120.png" sizes="120x120" rel="apple-touch-icon"> <!-- iOS 6 iPhone (retina) --> <link href="icon-114x114.png" sizes="114x114" rel="apple-touch-icon"> <!-- iOS 7 iPad --> <link href="icon-76x76.png" sizes="76x76" rel="apple-touch-icon"> <!-- iOS 6 iPad --> <link href="icon-72x72.png" sizes="72x72" rel="apple-touch-icon"> <!-- iOS 6 iPhone --> <link href="icon-57x57.png" sizes="57x57" rel="apple-touch-icon"> <!-- Startup images --> <!-- iOS 6 & 7 iPad (retina, portrait) --> <link href="startup-image-1536x2008.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPad (retina, landscape) --> <link href="startup-image-1496x2048.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (portrait) --> <link href="startup-image-768x1004.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 iPad (landscape) --> <link href="startup-image-748x1024.png" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone 5 --> <link href="startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 & 7 iPhone (retina) --> <link href="startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image"> <!-- iOS 6 iPhone --> <link href="startup-image-320x460.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image"> 

Answer 12

iPhone 6 and iPhone 6+

 <link href = "launch6.png" media = "(device-width: 375px)" rel = "apple-touch-startup-image">
 <link href = "launch6plus.png" media = "(device-width: 414px)" rel = "apple-touch-startup-image">

Using this link: http://www.mobilexweb.com/blog/safari-ios8-iphone6-web-developers-designers

Answer 13

If you want to target retina, I found a solution and wrote about it here: http://paulofierro.com/blog/2011/8/31/icons-and-splash-screens-for-ios-web-apps-retina -displays-also-welcome

In principle, property properties and media queries will not work. When loading the page, you need to enter a high resolution image using JavaScript. Hacky, but it works.