Earlier I posted a small guide on how to enable startup images for every iOS device out there. Today, I am updating that guide to reflect changes for supporting the iPhone 5. The new startup image has a dimension of 640×1096 pixels. The new javascript is:

(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";
                if (window.screen.height == 568) p = "img/startup-iphone5-retina.png";
		document.write('<link rel="apple-touch-startup-image" href="'+p+'">');
	}
})()

Also, a bug introduced in iOS 6 prevents webapps from taking on the full screen size of the iPhone 5 using the normal viewport values however a fix has been found that supports all devices including the iPhone 5.

<meta name="viewport" content="width=320.1, initial-scale=1.0">

The key here is the “width=320.1” which seems to fix the bug. Additionally, iOS 6 allows the webapp name to be set using a meta tag as follows:

<meta name="apple-mobile-web-app-title" content="Ross Search">

This allows you to set the webapp name instead of Safari using the page title.


1 Comment

Andy · January 3, 2013 at 9:13 pm

Hi Samer,

I’ve been trying to use the latitude import/export tool and had some questions (keep getting a 500 error), and was wondering if I could get some input? (I realize this isn’t the best place to put this comment, so feel free to delete and drop me an email).

Leave a Reply

Your email address will not be published. Required fields are marked *