iPad should download both orientation startup images

[benjoffe]

Issue #94 introduced a new method for including startup images to avoid unnecessary downloads. This technique makes sense for including the right iphone size image, but if it's ipad you really want to download both portrait and landscape, as the user might be opening the webapp in either orientation.

This isn't as condensed as it could be, but illustrates the idea:

<script>
if (navigator.platform==="iPad") {
  document.write('<link rel="apple-touch-startup-image" href="img/startup-1024x748.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)" /><link rel="apple-touch-startup-image" href="img/startup-768x1004.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)" />');
}
else {
  document.write('<link rel="apple-touch-startup-image" href="'+(window.devicePixelRatio==2?"img/startup-640x920.png":"img/startup-320x460.png")+'"/>')
}
</script>

[alexgibson]

Thanks for this Ben, you are right will see to updating the current method. This will also likely need changing further if the iPad 3 goes retina.

[alexgibson]

This still needs updating with retina assets for the new iPad (need to test the new file sizes work on iOS5.1), but i propose something like this. Anyone got further tweaks/suggestions?

<script>(function(){
var p, l;
if (navigator.platform === "iPad") {
    p = "img/startup-tablet-portrait.png";
    l = "img/startup-tablet-landscape.png";
    document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="(min-device-width: 768px) and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="(min-device-width: 768px) and (orientation: portrait)"/>');
} else {
    p = window.devicePixelRatio === 2 ? "img/startup-retina.png": "img/startup.png"; 
    document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');
}
})()</script>

[benjoffe]

I haven't tested this yet but this should take care of retina ipad and also avoid repeated html strings:

<script>(function(){
var
  i,
  r = window.devicePixelRatio == 2 ? '-retina',
  p = navigator.platform == "iPad" ?
    [
      'img/startup-tablet'+r+'-portrait.png" media="screen and (orientation: portrait)',
      'img/startup-tablet'+r+'-landscape.png" media="screen and (orientation: landscape)'
    ] :
    [
      'img/startup'+r+'.png'
    ];
  for (i=0; i<p.length; i++) {
    document.write('<link rel="apple-touch-startup-image" href="'+p[i]+'" />');
  }
})()</script>

[alexgibson]

Perhaps doing multiple document.write is more costly than a few bytes saved? (esp considering we are talking about serving potentially huge assets here)

<script>(function(){
var p, l, r = window.devicePixelRatio;
if (navigator.platform === "iPad") {
    p = r === 2 ? "img/startup-tablet-portrait-retina.png" : "img/startup-tablet-portrait.png";
    l = r === 2 ? "img/startup-tablet-landscape-retina.png" : "img/startup-tablet-landscape.png";
    document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (orientation: portrait)"/>');
} else {
    p = r === 2 ? "img/startup-retina.png": "img/startup.png"; 
    document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');
}
})()</script>

[alexgibson]

Have put together a quick test URL with the above code which we can check once the new iPad is available:

http://miniapps.co.uk/code/splashjs/

Edit: - this seems to be working ok on the iOS simulator using retina iPad mode