根据移动设备屏幕像素密度，给予不同分辨率的图片

在出现iphone4之前的相当长的时间内，网站开发人员和设计人员从来没有为像素苦恼过。那时候，设计人员打开photoshop，选择 “实际像素”后，看到的图片大小就是和最后真实的网站效果1:1的；对于开发人员也是如此，在css或者js里面写上1px，那么实际就是1px，在屏幕 上就是以一个硬件的像素点表示。

 

也不知道乔布斯是不是第一个在广泛使用的设备上使得“浏览器上声明的屏幕像素”和“屏幕硬件的实际像素”不一致的，对于iphone4，我们都知道它的硬件像素是640*960，然而我们在浏览器里面得到的声明像素确是320*480。

// iphone4、4s的safari中：
alert(window.screen.width) // 320
alert(window.screen.height) // 480
alert(window.screen.availWidth) // 320
alert(window.screen.availHeight) // 460

 

首先需要为了便于描述，我们设：
硬件像素：硬件实际的像素（分辨率），如iphone4就是640*960
参照像素：编写网页前端代码时，定义的密度，它是参照浏览器声明的像素（分辨率）的，如iphone4就是320*480

假设本例中所述网页的head中控制viewpoint的meta中有下列属性：

<meta name="viewport" content="initial-scale=1.0,width=device-width" />

 

即显示宽度定位设备宽度（设备参照像素的宽度）

对于编写代码和用css构成的各种展现，开发者按照参照像素即可，需要注意和讨论的是使用的图片
举个简单的例子，如果需要在iphone4上一个参照像素为100*100的div充满一张背景图，需要使用一张200*200的图，然后这样设置：

{
    width:100px;
    height:100px;
    background-image:url(200_200pxImg.png);
    background-size:100px 100px;
}

 

好了，“硬件像素/参照像素=2”的设备上的图片显示很清晰，用户体验提高了。
但是不要忘记了一点，对于“硬件像素/参照像素<2”的设备，你不需要给那么大分辨率的图，给了它也显示不了那么精细和清晰。

 

目前来看，设备主要有三种硬件像素和参照像素的比值。对于100*100参照像素的div，它能最清晰且不浪费和缩放任何像素所需的背景图大小如下表所示：

比值	常见设备	最清晰且不浪费和缩放任何像素所需的背景图大小
1	大多数传统的设备，如大多数PC、3gs及以前版本的iphone	100*100
1.5	相当一部分安卓设备	150*150
2	4及以后版本的iphone、3及以后版本的ipad、retina的macbook、比较高级的安卓系统的设备	200*200

于是，对于不同的设备，给予表中对应的背景图大小的图片是最理想的。

 

有如下方法来实现它：

1. 使用css的media属性

   <link href="d_2.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 2)" />
   <link href="d_1.5.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1.5)" />
   <link href="d_1.css" rel="stylesheet" media="screen and (-webkit-device-pixel-ratio: 1)" />

    

   或者在一个css文件中：

   #header {
       /* 比值为1的css代码 */
   }
    
   @media screen and (-webkit-device-pixel-ratio: 1.5) {
       /* 比值为1.5的css代码 */
   }
    
   @media screen and (-webkit-device-pixel-ratio: 2) {
       /* 比值为2的css代码 */
   }

    
2. 使用javascript判断的方法：

   alert(winodw.devicePixelRatio)

    
3. 使用css4的image-set
   在这个事情上，你如果想做得激进一些，只为支持这一css4属性的用户提供高清的图片，这一个激进方案的可行性假设基于“想要高清图片效果的用户，对用户体验比较在意，会跟随“时代的步伐”升级他的操作系统和浏览器”

   background-image: url(100_100pxImg.png);
   background-image: -webkit-image-set(url(100_100pxImg.png) 1x,
                  url(200_200pxImg.png) 2x);
   /* 当然 你还需要复制几行其它浏览器厂商的私有标签，如 -moz- */
   /* 由于目前市面上没有参照像素1.5，且浏览器为ios6或chrome21以上的设备，url(150_150pxImg.png) 1.5x) 是否能被识别不得而知*/

    
    

   目前支持的浏览器有：ios6的safari、chrome 21以上。

原文：http://blog.youyo.name/archives/mobile-device-screen-pixel-density.html