iPad should download both orientation startup images #105

Closed
benjoffe opened this Issue Mar 6, 2012 · 5 comments

Projects

None yet

2 participants

@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
H5BP member

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
H5BP member

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
H5BP member

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
H5BP member

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

@alexgibson alexgibson closed this Mar 18, 2012
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment