改编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的指南 。