【转】WEB APP 不同设备屏幕下图片适应分辨率

　　约翰·格鲁伯：我认为 MobileSafari 不会再逐点对应的渲染图片，因为新旧 iPhone 之间的像素尺寸极为悬殊。
 
　　戴夫·海厄特：大多数设计师仍停留在传统的思想：CSS 像素即屏幕像素。然而，当我们进入高 DPI 的世界，用户界面可能被整体放大，一个 CSS 像素会占据多个屏幕像素。

 

　　IPHONE 3和 IPHONE 4是最典型的了，图片或ICON，在IPHONE 3能清晰显示的时候，IPHONE 4却会变的很模糊，无奈，只能准备两套图了。好在CSS提供的Media属性，能方便的让我们识别出不同DPI的设备，并以此来应用不同的样式。

 

　　首先，看看，常见的IPHONE 和 Android屏幕参数。

 

设备	分辨率	设备像素比率
Android LDPI	320×240	0.75
Iphone 3 & Android MDPI	320×480	1
Android HDPI	480×800	1.5
Iphone 4	960×640	2.0

 

　　由此可见，Iphone 4的一个 CSS 像素实际上表现为一块 2×2 的像素。所以图片像是被放大2倍一样，模糊不清晰。

 

　　解决办法：

 

　　1、页面引用

<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 0.75)" href="ldpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.0)" href="mdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" href="hdpi.css" />
<link rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2.0)" href="retina.css" />

　　2、CSS文件里

#header {
    background:url(mdpi/bg.png);
}

@media screen and (-webkit-device-pixel-ratio: 1.5) {
    /*CSS for high-density screens*/
    #header {
        background:url(hdpi/bg.png);
    }
}

　　注：本文转自http://bbs.blueidea.com/home.php?mod=space&uid=168495&do=blog&id=23366