22

I have the following code in the <head> of my web app, but I'm just getting a white screen on my iPhone 3GS while the DOM loads instead of the splash screen.

<meta name="viewport" content="width=device-width, initial-scale=1"> 
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />

<!--STYLES-->

<!--SCRIPTS-->

<!-- iPhone LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h.png" sizes="320x480" media="(device-height: 480px)" rel="apple-touch-startup-image">
<!-- iPhone (Retina) LAUNCHSCREEN-->
<link href="includes/images/apple-launch-480h2X.png" sizes="640x920" media="(device-height: 480px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
<!-- iPhone 5+ LAUNCHSCREEN-->
<link href="includes/images/apple-launch-568h.png" sizes="640x1136" media="(device-height: 568px)" rel="apple-touch-startup-image">

How can I get my splash screen to display correctly on all versions of the iPhone? Code not shown, but my web app icons are working when added to the homepage. I'm using jQuery Mobile to build this web app.

I have also confirmed that the PNG images are exactly the correct sizes and I have deleted the web app icon, refreshed, and re-added to the homescreen multiple times. None of the solutions I've found on StackOverflow have worked for me. I have not tried the JavaScript solutions, because I'm sure there is a pure CSS solution.

2 Answers 2

52

The sizes attribute works for apple-touch-icons but it doesn't work for apple-touch-startup-images. The only way to target the startup images is with media queries. Adam's answer is good but relies on the <link>s being in a particular order since the media queries are under-specified. Here are the fully-qualified media queries:

<!-- iPhone -->
<link href="apple-touch-startup-image-320x460.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPhone (Retina) -->
<link href="apple-touch-startup-image-640x920.png"
      media="(device-width: 320px) and (device-height: 480px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPhone 5 -->
<link href="apple-touch-startup-image-640x1096.png"
      media="(device-width: 320px) and (device-height: 568px)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (portrait) -->
<link href="apple-touch-startup-image-768x1004.png"
      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="apple-touch-startup-image-748x1024.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 1)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, portrait) -->
<link href="apple-touch-startup-image-1536x2008.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: portrait)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">
<!-- iPad (Retina, landscape) -->
<link href="apple-touch-startup-image-1496x2048.png"
      media="(device-width: 768px) and (device-height: 1024px)
         and (orientation: landscape)
         and (-webkit-device-pixel-ratio: 2)"
      rel="apple-touch-startup-image">

Also note that certain viewports will cause your web app to be letterboxed on the iPhone 5:

<!-- Letterboxed on iPhone 5 -->
<meta name="viewport"
      content="width=device-width">
<meta name="viewport"
      content="width=320">
<!-- Not letterboxed on iPhone 5 -->
<meta name="viewport"
      content="initial-scale=1.0">
<meta name="viewport"
      content="width=320.1">

I maintain a Gist with a minimal iOS web app, including startup images and icons. If you want some more commentary, I also wrote a blog post about iPhone 5 startup images.

4
  • Awesome! I'll try these out. Thanks! Oct 3, 2012 at 15:55
  • 3
    If it helps anyone, the iPhone 6 splash sizes are here: stackoverflow.com/a/26057714/188926
    – Dunc
    Oct 28, 2014 at 14:39
  • @TaylorFausak could you make and provide a template GIT project including the startup screen images ? I do not think any is available and I never succeeded yet to see any splash screen on a home screen web app Dec 21, 2014 at 18:21
  • I am not interested in maintaining a Git repository for this. Everything you need, other than the images themselves, is available in the Gist. (You can even clone the Gist like a regular Git repository!) Apr 21, 2015 at 18:53
3

Here are the dimensions to use:

<!-- iPhone -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px)" rel="apple-touch-startup-image">

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

<!-- iPhone Tall (Retina) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPhone-Tall-RETINA.jpg" rel="apple-touch-startup-image" sizes="640x1096">

<!-- iPad (portrait) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-Portrait.jpg" media="(device-width: 768px) and (orientation: portrait)" 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 (orientation: landscape)" rel="apple-touch-startup-image">

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

<!-- iPad (Retina, landscape) -->
<link href="http://www.example.com/mobile/images/apple-startup-iPad-RETINA-Landscape.jpg" media="(device-width: 768px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image">
2
  • 1
    You used 640 x 1096 for the iPhone Tall, but on Apple's iOS Human Interface Guidelines they say it should be 640 x 1136. Which is right? Sep 28, 2012 at 16:34
  • 4
    You're not accounting for the 40 pixels taken up by the status bar. The 640 x 1136 is for an app launch image. 640 x 1096 is correct. Sep 28, 2012 at 22:32

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.