媒体定位

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' guide。

适应iphone5的apple-touch-startup-image javascript代码？

1 个答案:

媒体定位

用JavaScript测量设备高度