Struggling with Splash Screens for iOS Devices: Making HTML5 Apps Act as Native Apps

Lately, I've found myself writing apps that run on mobile devices.  JQuery Mobile is a great way to get your feet wet, so that where I eased into it. After playing around with it, I'm a huge fan and am aware of it's proper use / limitations. For the most part though, HTML5 can do some awesome things. I'm a Mac guy so when I write JQuery Mobile apps, iOS devices are the first ones I test on. Since iOS supports some really neat HTML5 features, I set out to take advantage of them. In particular, the splash screen.

Make Your HTML App Look Native

You probably already know, that with the following two lines, you can make your HTML5 app look more like a native app on iOS.

<meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" />

These meta tags only have an effect if the user "Adds To Home Screen" after entering your application, but it's still cool.

When the user does save a link to your app on their Home Screen, the icon can be customized by supplying custom images with some more tags.

<link rel="apple-touch-icon" sizes="57x57" href="/images/icons/calzone-57x57.png" /> <link rel="apple-touch-icon" sizes="72x72" href="/images/icons/calzone-72x72.png" /> <link rel="apple-touch-icon" sizes="114x114" href="/images/icons/calzone-114x114.png" /> 

Apple uses the correct size icon for the particular device the user is on. 57 for iPhone non-retina display, 74 for iPads, and 114 for iPhone retina display.

Apple also provides a way to assign the splash screen too - except as of this writing, it doesn't work and there is NO DOCUMENTATION anywhere that explains this.

The Fix: A Media Query

You still stack the apple-specific tags like above, but you add a media query to the iPad link to make the iPhone ignore it.

<link rel="apple-touch-startup-image" href="/images/startup/calzone-320x460.png" />

<link rel="apple-touch-startup-image" sizes="640x920" href="/images/startup/calzone-640x920.png" />

<link rel="apple-touch-startup-image" sizes="768x1004" href="/images/startup/calzone-768x1004.png" media="screen and (min-device-width: 321px) and (max-device-width: 1024px) and (orientation:portrait)" />

The first two links satisfy the iPhone but without the media query on the third, the iPhone gets confused and decides it doesn't want to play any more and shows the user nothing at all. Well, they do get a big white screen while your app loads but it's not pretty.

The iPad appears to recognize the media query without a problem and uses the third link nicely. You can even specify the orientation. If you put the media query on the first two, the iPhones show nothing. Again though, if you remove the media query from the third, the iPhone show nothing - but the iPad works.

There's really nothing wrong with the iPad (other than it's hard to hold).

There you have it. Doing this will allow splash screens to display on the iPhones and iPads.

One problem I found is that the iPhone needs to the load the app one time before it will show the splash screen, but it works every time after that.