mulitple apple touch startup image resolutions for ios web app esp for ipad

mulitple apple touch startup image resolutions for ios web app esp for ipad  using -'ipad,mobile-safari,ios,web-applications'

I've written an HTML5-based iOS web application and all seems to be working well, but I'm trying to polish it up with multiple startup screens. The iPhone/iPod touch works well w/a PNG of 320x460, as follows:

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

I found plenty of documentation that says the startup images for the iPad should, like the iPhone/iPod touch, have the 20px shaved from the height to accommodate for the status bar giving resolutions of 768x1004 (portrait) or 1024x748 (landscape). However, in my testing (currently w/an iPad running iOS 3.2.2), only the 768x1004 (portrait) resolution works (but is incorrect—20px too narrow—when in landscape mode).

I've tried the following (a wild guess based on the functionality of the apple-touch-icon links), 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 the 768x1004 resolution image works if it's the last link element listed. If the 1024x748 resolution image is last, a gray background is rendered in its stead (but never the 768x1004). So, obviously the apple-touch-startup-image link doesn't support the sizes attribute.

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

asked Oct 7, 2015 by rajnipancholi
0 votes

12 Answers

0 votes

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


answered Oct 7, 2015 by 20shahi
0 votes

I actually got it to work on landscape mode. I got the info here:

The issue is the landscape image has to be 748x1024 (A landscape image sideways, I rotated clockwise) instead of 1024x748.

I also had to launch the app in portrait mode first and then landscape.

answered Oct 7, 2015 by badhwar.rohit
0 votes

I just wanted to offer a combination of answers that actually worked. We found with the answer that was selected, the retina versions of the splash images were not being used. Pavel's answer fixed the retina version for the iPad. The following has been tested on iPhone (Retina and non-retina) and iPad (retina and non-retina).

I can't take credit for any of this, but this configuration works. Just copy and paste, make sure to make the images exactly the size dictated in their names.

answered Oct 7, 2015 by tejas lakhani
0 votes

If one link elements was missing a media property things didn't work for me. The code successfully displayed a launch image on an iPhone 3G and iPad (portrait and landscape mode) .

<-- iPad - landscape (748x1024) -->

<-- iPad - portrait (768x1004) -->  

<-- iPhone - (320x460) -->

Couldn't give it a try for the iPhone4 (high res) but most probably it works the same way.

answered Oct 7, 2015 by gauravg.gwl
0 votes

Apparently the startup screen only works under the following conditions

1) must be the exact size required by the device. 2) the device must be in portrait orientation when the app is launched. 3) some sources say png only but jpg seems to work now.

answered Oct 7, 2015 by vickeykumar66
0 votes

The way I was able to get 4 individual Startup Images for WebApps on the iPhone/iPad/iPhoneRetina was a combination of a few things...

Non-Retina iPhone (320x460):


Retina iPhone (4 & 4S) (640x920): Use the Javascript technique posted above.

iPad (both orientations) is tricky. Landscape must be 748w x 1024h, with the "bottom" being the left hand side. Portrait must be 768w x 1004h, with the "bottom" being the bottom. I had to include the iPad tags via PHP by detecting iPad in the User Agent, otherwise the non-retina iPhone Startup Image wouldn't load. Here is the code...


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

Of course you could also include the iPad code via javascript. lol

answered Oct 7, 2015 by santosh soni
0 votes

Spent some time figuring out how to make splash screen for the new iPad (Retina), here is my tested and working solution for both orientation of the new iPad (Retina).

P.S. before posting this I've tested already given solutions and they didn't worked.

answered Oct 7, 2015 by deepak gupta
0 votes

i have tested many times, now i am sure it works when you act like this: first hold your pad in portrait way, open you app, then hold you app in landscape way, open you app. sucks but...seems this is the only way to make it. you have to first hold your pad portrait to "unlock" the bug.

answered Oct 7, 2015 by akasati02
0 votes

This may be obvious to some but the startup image would not work for me unless I added I added a shortcut to the home screen, ran it from there, and had the following code:


This page was useful for figuring this all out:

answered Oct 7, 2015 by mtabakade
0 votes

Complete meta:

answered Oct 7, 2015 by ashishshukla
0 votes
answered Oct 7, 2015 by santosh soni
0 votes

If you want to target the retina display I found a solution and blogged about it here:

Basically the sizes property and media queries will not work. You have to inject the high-res startup image via JavaScript once your page is loaded. Hacky but works.

answered Oct 7, 2015 by manju bhargava