Start up screen for mobile website on iPad

Question

Im using the following script to add in startup screens for my mobile website, once its been added to the home screen.

<script>
(function(){

    var a;
    if(navigator.platform === "iPad") {
        a = window.orientation!==90||window.orientation === -90 ? 
             "/assets/img/startup/startup-tablet-landscape.png" :
             "/assets/img/startup/startup-tablet-portrait.png";
    }
    else {
        a = window.devicePixelRatio === 2 ? 
             "/assets/img/startup/startup-retina.png" :
             "/assets/img/startup/startup.png";
    }
    document.write('<link rel="apple-touch-startup-image" href="' + a + '"/>');

})();
</script>

This works for iPhone but not for iPad, I'm testing on the new iPad, does this matter? All I get is a white screen before it loads.

Answer 1

You don't need javascript for that, you could use this snipplet and it should pick the right image automatically:

<!-- For iPhone 4 with high-resolution Retina display: -->
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="apple-touch-icon-114x114-precomposed.png">

<!-- For first-generation iPad: -->
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="apple-touch-icon-72x72-precomposed.png">

<!-- For non-Retina iPhone, iPod Touch, and Android 2.1+ devices: -->
<link rel="apple-touch-icon-precomposed" href="apple-touch-icon-precomposed.png">


<!-- 320x460 for iPhone 3GS -->
<link rel="apple-touch-startup-image" media="(max-device-width: 480px) and not (-webkit-min-device-pixel-ratio: 2)" href="startup-iphone.png">

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

<!-- iPad Portrait 768x1004 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: portrait)" href="startup-iPad-portrait.png">

<!-- iPad Landscape 1024x748 -->
<link rel="apple-touch-startup-image" media="(min-device-width: 768px) and (orientation: landscape)" href="startup-iPad-landscape.png"> 

Source: https://gist.github.com/1375646