iOS Webapp Startup Image

Recently, I have been working on my webapp, Rossie Rotation Advice, which helps Ross University medical school students in their clinical clerkships by allowing them to search for advice. The source of the content is Facebook where there is a group used by students to interact with others.

The webapp has matured very well and the next logical step after content is polishing the app. Today, I tried to add startup images for every possible iOS device; I have done this in the past, before all of the Retina displays. Now a developer must provide an image for all of the possible scenarios:

• iPhone 3GS or lower
• iPhone 4 or higher
• iPad (2 or lower) in portrait
• iPad (2 or lower) in landscape
• iPad 3 in portrait
• iPad 3 in landscape

This might seem like a long list and it is! Now the typical way to add a startup image according to the documentation provided by Apple is:

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

These link tags do accept media queries allowing you to target specific devices in different orientations. I tried to use the media queries and they worked great however the iPad 3 (or the new iPad) was not allowing me to load any startup screens. Additionally, the media queries did not prevent other devices from downloading all of the images. So instead I opted for this javascript solution:

	(function(){
		var p, l, r = window.devicePixelRatio;
		if (navigator.platform === "iPad") {
			p = r === 2 ? "img/startup-tablet-portrait-retina.png" : "img/startup-tablet-portrait.png";
			l = r === 2 ? "img/startup-tablet-landscape-retina.png" : "img/startup-tablet-landscape.png";
			document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)">');
		} else {
			p = r === 2 ? "img/startup-retina.png": "img/startup.png"; 
			document.write('<link rel="apple-touch-startup-image" href="'+p+'">');
		}
	})()

This solution allows me to quickly target any device by simply checking if its an iPad or not then it checks whether the pixel ratio is 1 or 2 and sets the appropriate image based on that. The best part about this solution is that it only shows the link tags for the appropriate device at any given time.

Another thing I noticed with startup images is iOS redownloads the images once the app is open allowing developers to update the splash screen without the end user having to delete and readd the application to the home screen.