纠正CSS媒体查询以提供iPhone <= 3和iPhone 4+不同的图像不浪费带宽

问题描述

| 在阅读了有关媒体查询的出色文章之后（http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/）。我想确保我对（仅适用于iphone的）Web应用程序的媒体查询正确无误，并且用户的iphone不会下载用于其他iPhone设备的不必要的背景图片。 它是否正确？

/* IPHONE 3 IMAGES
================================*/
@media all and (-webkit-min-device-pixel-ratio: 2){
    /* my small background imgs here.... */    
}

/* IPHONE 4 \'retina\' IMAGES
================================*/
@media all and (max-device-width: 480px){
    /* my high-res background imgs here.... */    
}

    

解决方法

        您可以使用@media而非全部和（-webkit-min-device-pixel-ratio：2）定位iphone 4之前的版本，但这仅在浏览器知道min-devive-pixel-ratio的情况下有效。因此，较早的iPhone版本和其他浏览器将不会加载任何规则。唯一的方法是在服务器端（不确定是否可以在iphone 4和iOS 4之间进行区分），或使用JS检测并加载这两个规则中的任何一个。 两者都不理想，所以我个人会选择只接受额外的下载。甚至可能将大图像发送给这两个图像，因为http开销远比正文的几个额外字节差，但这取决于图像的大小。