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?

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

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.

Answer 3

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

Answer 4

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