iphone - Adapt apple-touch-startup-image javascript code for iphone5? -

i'm doing webpage uses startup image feature ios devices. task, i'm using code placed on footer detects javascript ios device is, , loads startup image it. in way, site saves lot of bandwith because it's downloading 1 image instead of four.

but new screen size of iphone 5, code needs changes, can't figure out how these.

this code:

<script> (function(){     var p,l,r=window.devicepixelratio;     if(navigator.platform==="ipad"){         p=r===2?"http://example.com/ipad-portrait-retina.jpg":"http://example.com/ipad-portrait-non-retina.jpg";         l=r===2?"http://example.com/ipad-landscape-retina.jpg":"http://example.com/ipad-landscape-non-retina.jpg";         document.write('<link rel="apple-touch-startup-image" href="'+l+'" media="screen , (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen , (orientation: portrait)"/>');     }     else{         p=r===2?"http://example.com/iphone-retina.jpg":"http://example.com/iphone-non-retina.jpg";         document.write('<link rel="apple-touch-startup-image" href="'+p+'"/>');     } }) </script> 

as can see, work intended ipad/iphone variables device orientation , device pixel ratio. problem iphone retina display, there's no variable determine if i5 or i4/4s, download image 960x640 iphone.

do have clue on how include variable device screen size?

a better way use media targeting, rather javascript.

done correctly, iphone ever retrieve image appropriate screen size , pixel ratio, there no need resort javascript.

media targeting

this works iphones;

<!-- iphone 2g, 3g, 3gs --> <link rel="apple-touch-startup-image" media="(device-width: 320px) , (device-height: 480px)" href="apple-touch-startup-image-320x460.png"> <!-- iphone 4, 4s --> <link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) , (device-width: 320px) , (device-height: 480px)" href="apple-touch-startup-image-640x920.png"> <!-- iphone 5 --> <link rel="apple-touch-startup-image" media="(device-width: 320px) , (device-height: 568px)" href="apple-touch-startup-image-640x1096.png"> 

and ipads;

<!-- ipad 1, 2, mini - portrait --> <link rel="apple-touch-startup-image" media="(device-width: 768px) , (orientation: portrait)" href="apple-touch-startup-image-768x1004.png"> <!-- ipad 1, 2, mini - landscape --> <link rel="apple-touch-startup-image" media="(device-width: 768px) , (orientation: landscape)" href="apple-touch-startup-image-1024x748.png"> <!-- ipad 3, 4 - portrait --> <link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) , (device-width: 768px) , (orientation: portrait)" href="apple-touch-startup-image-1536x2008.png"> <!-- ipad 3, 4 - landscape --> <link rel="apple-touch-startup-image" media="(-webkit-device-pixel-ratio: 2) , (device-width: 768px) , (orientation: landscape)" href="apple-touch-startup-image-2048x1496.png"> 

more information on these startup images can found @ stuff & nonsense.

this cause device download image appropriate it.

measuring device height in javascript

if must use javascript reason (and advise against it), can retrieve device's height window.screen.height. on 3.5-inch devices, 480, , on 4-inch devices, 568.

for more information on measuring viewport in js, see responsejs' guide.