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).