【问题标题】：Adapt apple-touch-startup-image javascript code for iphone5?为 iphone5 适配 apple-touch-startup-image javascript 代码？
【发布时间】：2013-06-27 13:17:11
【问题描述】：

我正在做一个网页，它使用 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 的图像。

您对如何包含设备屏幕尺寸的变量有任何线索吗？

【问题讨论】：

看看stackoverflow.com/a/12471432/1328096可能对你有帮助。

标签： iphone web-applications iphone-5

【解决方案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' guide。

【讨论】：