14

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?

ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239
PFM
  • 333
  • 1
  • 3
  • 7

4 Answers4

31

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.

DavidTaubmann
  • 3,223
  • 2
  • 34
  • 43
adamdehaven
  • 5,890
  • 10
  • 61
  • 84
  • 2
    Thanks. What is the resolution of each image though? – tsdexter Mar 22 '13 at 15:22
  • See here: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html – adamdehaven Mar 22 '13 at 20:08
  • 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? – Crashalot May 01 '13 at 01:08
  • This answer didn't work. At least for the iPhone 4, we had to make the image 320x460. – Crashalot May 04 '13 at 19:11
  • 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. – adamdehaven May 04 '13 at 22:29
14

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

AlBeebe
  • 8,101
  • 3
  • 51
  • 65
13

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

Tivie
  • 18,864
  • 5
  • 58
  • 77
  • 5
    must be PNG and 320x460 NOT 320x480 – AlBeebe May 19 '11 at 19:27
  • 3
    Actually jpeg works. The documentation did say only png at one time but not any longer. https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html – Darwin Feb 23 '12 at 09:57
  • 2
    This is no longer current - see my answer – adamdehaven Oct 01 '12 at 01:08
7

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