改编iphone5的apple-touch-startup-image javascript代码？

Question

I'm doing a webpage that uses the startup image feature for iOS devices. For this task, I'm using a code placed on the footer that detects with javascript which iOS device is, and then loads the startup image for it. In this way, the site saves a lot of bandwith because it's downloading only one image instead of four.

But with the new screen size of the iPhone 5, my code needs some changes, but I can't figure out how to do these.

This is the 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 and (orientation: landscape)"/><link rel="apple-touch-startup-image" href="'+p+'" media="screen and (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 you can see, this work is intended for the iPad/iPhone with variables for the device orientation and the device pixel ratio. But the problem is that for the iPhone with retina display, there's no variable to determine if is the i5 or the i4/4S, so it just download the image for the 960x640 iPhone.

Do you have any clue on how to include a variable for device screen size?

Answer 1

A better way to do this is to use media targeting, rather than JavaScript.

Done correctly, the iPhone will only ever retrieve the image appropriate to its screen size and pixel ratio, so there is no need to resort to JavaScript.

Media Targeting

This works for iPhones;

<!-- iPhone 2G, 3G, 3GS -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (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) and (device-width: 320px) and (device-height: 480px)" href="apple-touch-startup-image-640x920.png">
<!-- iPhone 5 -->
<link rel="apple-touch-startup-image" media="(device-width: 320px) and (device-height: 568px)" href="apple-touch-startup-image-640x1096.png">

And for iPads;

<!-- iPad 1, 2, Mini - Portrait -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (orientation: portrait)" href="apple-touch-startup-image-768x1004.png">
<!-- iPad 1, 2, Mini - Landscape -->
<link rel="apple-touch-startup-image" media="(device-width: 768px) and (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) and (device-width: 768px) and (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) and (device-width: 768px) and (orientation: landscape)" href="apple-touch-startup-image-2048x1496.png">

More information on these startup images can be found at Stuff & Nonsense .

This will cause the device to download only the image appropriate to it.

Measuring device height in JavaScript

If you must use JavaScript for any reason (and I do advise against it), you can retrieve the device's height with window.screen.height . On 3.5-inch devices, it will be 480 , and on 4-inch devices, it is 568 .

For more information on measuring the viewport in JS, see ResponseJS' guide .