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

Asked 17/9, 2012 at 6:38 Answered 24/9, 2012 at 17:39

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!

Hayfork answered 17/9, 2012 at 6:38 Comment(0)

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

Hayfork answered 18/9, 2012 at 6:24 Comment(6)

Does the sizes attribute actually work on <link> elements? I thought you had to use media queries. My solution uses media queries and works with all iOS devices. – Burlburlap 20/9, 2012 at 21:50

sizes attrib really works. Just check out the demo and run it on 4 inch simulator or iPhone5, it will tell – Hayfork 21/9, 2012 at 9:26

Your demo does work, but sizes has nothing to do with it. The iPhone 5 is loading the last <link> targeted at it with media queries. If you listed [email protected] above [email protected], it wouldn't work. Case in point, you have sizes="320x640" instead of sizes="320x460". – Burlburlap 21/9, 2012 at 14:13

Any tips about media queries for iPhone5 will be grateful – Hayfork 21/9, 2012 at 17:42

The blog post I linked earlier (iPhone 5 Web App Startup Image) explains the media query to match an iPhone 5. For posterity: (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2). – Burlburlap 22/9, 2012 at 3:26

@OpenThread.. i have a question about it... i tried your above answer, its working when my web application run under iPhone 5, fine... but when i tried iPhone 4 its not working... how can i set both device startup image.? for example: when run web app in iphone 5 show imageforiphone5.jpg then when run iphone 4 run imageforiphone4.jp... any idea..??? thanks – Savina 26/3, 2013 at 8:41

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

Paddy answered 20/9, 2012 at 15:2 Comment(0)

There is an official reference for this… (even for iPhone 5)

http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html

Veradia answered 24/9, 2012 at 17:39 Comment(1)

This reference has nothing to do with my question, since I'm making web app – Hayfork 25/9, 2012 at 3:34

Recommended topics

Hot tags