2

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

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

4

1 回答 1

0

一个更好的方法是使用媒体定位，而不是 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 的指南。

于 2013-09-06T03:32:28.153 回答