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

iphone web-applications iphone-5
OpenThread picture OpenThread · Sep 17, 2012 · Viewed 12k times · Source

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

OpenThread picture OpenThread · Sep 18, 2012

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

Related questions

How to check if an app is installed from a web-page on an iPhone?

I want to create a web-page, a page that will redirect an iPhone to the app-store if the iPhone does not have the application installed, but if the iPhone has the app installed I want it to open the application. …

Read More
How can a web application send push notifications to iOS devices?

I'm working on a web app. How can I send push notifications to iOS users when there is new content?

Read More
iPad Web App: Detect Virtual Keyboard Using JavaScript in Safari?

I'm writing a web app for the iPad (not a regular App Store app - it's written using HTML, CSS and JavaScript). Since the keyboard fills up a huge part of the screen, it would make sense to change the …

Read More