iPhone 4 Retina "apple-touch-startup-image" for Web-apps

iphone web-applications mobile-safari iphone-4 retina-display
Benny picture Benny · Sep 26, 2010 · Viewed 16.7k times · Source

This has been asked multiple times here, but without a solid and understandable answer. This is a web-app, not a native-app.

I'm using:

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

to display the startup image. It loads fine if the image's resolution is 320x460. I tried using the retina's resolution which is 640x920 (40px are taken out by the status bar), that didn't work. I've tried the @2x thing, that failed too.

Is it even possible [yet]?

Answer

adamdehaven picture adamdehaven · Mar 4, 2012

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.

    <!-- iPhone -->
    <link href="http://www.example.com/mobile/images/apple-startup-iPhone.jpg" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 1)" 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 (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.

Related questions

How to check if an app is installed from a web-page on an iPhone?

I want to create a web-page, a page that will redirect an iPhone to the app-store if the iPhone does not have the application installed, but if the iPhone has the app installed I want it to open the application. …

Read More
How to open a new window on iphone's standalone (fullscreen) mode

<!doctype html> <html> <head> <title>page</title> <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" …

Read More
Strange behavior of select/dropdown's onchange() JS event when using 'Next' on Mobile Safari Dropdown list item select box

This is a hard one to articulate and I am new to mobile web development so please bear with me: On my webpage, I have 3 Nested dropdown lists (Area, Town, Street). Nested as in, each dropdown's items are modified when …

Read More