how to set apple-touch-startup-image for iphone5?

Question

I tried

<link href="Images/[email protected]" sizes="640x1136" media="(device-width: 640px) and (device-height: 1136px)" rel="apple-touch-startup-image">

But it didn't work. And apple's interface guildline hasn't been updated for iphone5.

Anybody knows?Thanks!

Answer 1

1.Don't use "width=device-width" for viewport, use codes below:

<meta content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<meta content="yes" name="apple-mobile-web-app-capable">

2.Prepare an image sized 640*1096, save as "Images/Default-568h@2x", add this code to your page's header:

<link href="Images/[email protected]" rel="apple-touch-startup-image" sizes="640x1096">

Here's a demo, it's compatible with iPhone5: https://github.com/openfibers/php-tot

Answer 2

The startup image has no direct relationship with the letterboxing.

The solution is to just change the viewport to a different width than device-width or 320. Why? I don't know, it's really weird but if you just use the next viewport you don't get the letterbox.

<meta name="viewport" content="width=320.1">

The sizes attribute on the apple-touch-startup-image is being ignored so if you want to provide more than one you need to use media queries.

Other solution is to just update the viewport using JavaScript when it's an iPhone/iPod 4".

More on the solution and the findings at http://www.mobilexweb.com/blog/iphone-5-ios-6-html5-developers#updatewebapps