How to make a splash image for your webapps on iPhone / iPad in portrait (pure css)

geistteufel's picture
Submitted by geistteufel on Sat, 01/29/2011 - 00:21

 

Well, normally it should be simple, but everything I have seen doesn't work, so here my easy solution :

<!DOCTYPE html>
<html>
    <head>
    <title>Test</title>
    <!-- iPad / iPod / iPhone section -->
    <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
    <link rel="apple-touch-icon" href="YOURICON.png" />
    <link rel="apple-touch-icon-precompsed" href="YOURICON.png" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <link rel="apple-touch-startup-image" href="IPADPORTRAIT.png" media="no mobile, screen and (device-width: 768px)"/>
    <link rel="apple-touch-startup-image" href="IPHONEPORTRAIT.png" media="mobile"/>
    <!-- iPad / iPod / iPhone section -->
    <script type="text/javascript" src="Ressources/Javascript/ui.js"></script>
</head>
<body>
</body>
</html>

The IPADPORTRAIT need to have a resolution of 768x1004.

The IPHONEPORTRAIT need to have a resolution of  320x460.

So now let's explain the media and the order. iPhone capture any screen and mobile media (even if you set a device-width). iPad doesn't capture mobile media and has a understand the device-width.

So first push the iPad with "no mobile, screen and (device-width: 768px)", perfect for iPad, don't download it on mobile device, and show only if device has a 768px width screen. After let's push the iPhone media, with "mobile". 

So iPhone will capture the first one and replace it by the second. iPad will capture the first one and ignore the second !

I'm looking for a better way to do this, and to support landscape. I have try the right resolution, with "orientation: landscape" but it doesn't work on both device. perhaps a bug ?

It's done

Short URL

Comments