改編iphone5的apple-touch-startup-image javascript代碼？

Question

我正在做一個使用iOS設備啟動圖像功能的網頁。 對於此任務，我使用放置在頁腳上的代碼，該代碼用javascript檢測是哪個iOS設備，然后為其加載啟動圖像。 這樣，該站點節省了很多帶寬，因為它僅下載一個映像，而不是四個。

但是隨着iPhone 5的新屏幕尺寸，我的代碼需要進行一些更改，但是我不知道該怎么做。

這是代碼：

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

如您所見，這項工作是針對iPad / iPhone的，具有設備方向和設備像素比率的變量。 但是問題在於，對於帶有視網膜顯示屏的iPhone，沒有變量可以確定是i5​​還是i4 / 4S，因此它只下載了960x640 iPhone的圖像。

您是否有關於如何包含設備屏幕尺寸變量的任何線索？

Answer 1

更好的方法是使用媒體定位，而不是JavaScript。

如果做得正確，iPhone將只能檢索適合其屏幕尺寸和像素比率的圖像，因此無需訴諸JavaScript。

媒體定位

這適用於iPhone；

<!-- 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">

對於iPad；

<!-- 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">

有關這些啟動映像的更多信息，請參見Stuff＆Nonsense 。

這將導致設備僅下載適合它的圖像。

用JavaScript測量設備高度

如果出於任何原因必須使用JavaScript（我建議不要這樣做），則可以通過window.screen.height檢索設備的高度。 在3.5英寸設備上為480 ，在4英寸設備上為568 。

有關在JS中測量視口的更多信息，請參見ResponseJS的指南 。