iPhone web app startup screen

Question

I'm working on an iPhone web app where I'm using the "apple-mobile-web-app-capable" meta tag to get "full screen mode". When I lauch the app it shows a picture of the page where I left of the last time while it loads. It looks like the app is ready to receive input when it is not, and that's confusing.

Is it possible to change the default behaviour and show a blank screen until it is ready to receive input?

Dalesman

Answer 1

put this between your HEAD tags:

<link rel="apple-touch-startup-image" href="image.jpg">

The image you use must be JPG or PNG with a resolution of 320x460

Slovenly

must be PNG and 320x460 NOT 320x480 – Gusgusba

Actually jpeg works. The documentation did say only png at one time but not any longer. developer.apple.com/library/ios/#DOCUMENTATION/… – Leaper

This is no longer current - see my answer – Obstruction

Answer 2

This will add a Splash Screen to your Web App. Below are the sizes you’ll need for iPad (both retina and non), iPhone/iPod Touch (retina and non), and iPhone 5. These include the status bar area as well.

Apple Docs-Launch Images, Apple Docs-Icon and Image Sizes

<!-- iPhone (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-RETINA.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPhone 5 -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg"  media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Portrait -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Landscape -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 1)" rel="apple-touch-startup-image">

<!-- iPad Portrait (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Portrait.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

<!-- iPad Landscape (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (device-height: 1024px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">

If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.

Obstruction

Thanks. What is the resolution of each image though? – Colwin

See here: developer.apple.com/library/ios/#documentation/userexperience/… – Obstruction

For the iPhone, why is a launch image height of 480px required when the status bar takes away 20 px? Won't the launch image be off-center? – Emad

This answer didn't work. At least for the iPhone 4, we had to make the image 320x460. – Emad

This DOES work. If you are using an image of 460 height, you are not following Apple's standards. You didn't read the answer correctly. The image sizes are outlined in Apple's docs which are referenced in my comment above. This answer shows the media queries needed - not the image sizes. – Obstruction

Answer 3

It MUST be 320x460, it will NOT work if its 320x480.

Gusgusba

Answer 4

The image must be PNG and 320x460 this works only under iPhone OS 3.0 or higher.

Prevent

Is there a way to do this for android? – Larva