Search code examples
iphoneweb-applicationsmobile-safariiphone-4retina-display

iPhone 4 Retina “apple-touch-startup-image” for Web-apps (landscape)

Hope this question hasn't been asked before.

I've got the following working

<!-- 640x920 for retina display -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)" href="images/iphone4-portrait.jpg" />

i'm aware that the image has to be 640x920 else it will not work
i know that there is no Landscape option for this? or is there?

So...on to my issue, when loading the web app from the home screen in Landscape you can see the page content behind the splash screen (lighter green area in the landscape image below), where the states bar was in portrait

Has anyone out there had this issue, if so how are you getting around it.

Thanks

enter image description here enter image description here

Solution

  • You can not have a landscape startup image on an iPhone. Landscape images ONLY work on the iPad. Also, you must use the proper size on the iPhone, or it will not display at all.

    This will add a Splash Screen to your Web App. Below are the sizes you’ll need for both iPad and iPhone/iPod Touch, these include the status bar area as well.

    iPad Landscape – 1024 x 748

    <link rel="apple-touch-startup-image" sizes="1024x748" href="img/splash-screen-1024x748.png" />

    iPad Portrait – 768 x 1004

    <link rel="apple-touch-startup-image" sizes="768x1004" href="img/splash-screen-768x1004.png" />

    iPhone/iPod Touch Portrait – 320 x 480 (standard resolution)

    <link rel="apple-touch-startup-image" href="img/splash-screen-320x460.png" />

    iPhone/iPod Touch Portrait – 640 x 960 pixels (Retina Display high-resolution)

    <link rel="apple-touch-startup-image" sizes="640x960" href="img/splash-screen-640x960.png" />

    If creating a Web App for iPad compatibility it’s recommended that both Landscape and Portrait sizes are used.