Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iPhone web splash screen not working

Tags:

iphone

In iPhone web applications you supposedly can define a custom splash screen that will appear while the site is loading (when loading the site from a saved bookmark icon on the home page). The point is to make the web app startup experience feel a lot more like a real iphone application.

I believe the syntax is like this:

<link rel="apple-touch-startup-image" href="/splash.png" /> (placed in the <head> section of the page).

Where splash.png is a vertically oriented 320x460 image.

I can't seem to get it work... does anybody have any tips and tricks for this?

like image 393
Scrappydog Avatar asked Oct 29 '09 19:10

Scrappydog


2 Answers

Make sure it is 320x460 pixels.

You already said that, but that was the solution for me.

like image 59
Sebastián Grignoli Avatar answered Oct 01 '22 16:10

Sebastián Grignoli


You can only set one splash screen or else it will fail. In order to select either an ipad or iphone splash screen you need a little javascript.

The ipad landscape splash screen that can be used for native apps doesn't work for web apps. Neither would a retina splash screen for the iphone4. You can only choose an ipad or an iphone sizes splash. Setting the size attribute on the link element seems to work on the ipad. But having more than one splash image link element makes the iphone fail.

The splash screen sizes must be exact. 320x460 for iphone/ipod and 1024x748 for ipad. If you need a landscape slash screen you'll need to rotate it in photoshop as there is no control during the app's relaunch.

To test it's best to try first with app cache off and throttle the bandwidth with charles proxy or something similar.

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

<!-- hide safari chrome -->
<meta name="apple-mobile-web-app-capable" content="yes" />

<!-- iphone start up screens -->
<script type="application/javascript">
    var appl = document.createElement("link");
    appl.setAttribute('rel', 'apple-touch-startup-image');
    if(screen.width < 321 && window.devicePixelRatio == 1) {
      appl.setAttribute('href', 'img/icons/launch320x460.png'); //iphone 3Gs or below
    } else if (screen.width < 321 && window.devicePixelRatio == 2) { 
      //setting @2x or a 640x920 image fails, just use the iphone splash screen
    } else if (screen.width < 769 && Math.abs(window.orientation) != 90) {
      appl.setAttribute('href', 'img/icons/launch1024x748.png'); //ipad 2 or below (portait)
    } else if (screen.width < 769 && Math.abs(window.orientation) == 90) { 
      //landscape fails as well, use standard ipad screen
    }
    document.getElementsByTagName("head")[0].appendChild(appl);
</script>

<!-- iphone springboard icons -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/icons/icon57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/icons/icon114x114.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/icons/icon72x72.png" />
like image 35
puppybits Avatar answered Oct 01 '22 14:10

puppybits