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

在出现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

相关推荐