移动开发之像素的深入理解

许小珂在写这篇文章之前还没想好用什么标题,文章写了一大半了依然感觉写的挺乱的。权当是把自己的一些个人感悟进行下总结。

举个栗子
在分享之前许小珂先问大家一个问题:一个背景为width:640px;和height:1136px能不能再iPhone5上完全展示?大家都知道iPhone5的设备分辨率是640*1136,如果是这样的话是不是这个背景能正好在iPhone5上完全展示?
接下来咱们用代码去写出这样一个页面
css代码

.bg{
    width: 640px;
    height: 1136px;
    background-color: #666666;
    font-family: 'Microsoft Yahei';
    font-size: 150px;
    text-align: center;
}

html代码

<div class="bg">灰黑色</div>

大家会发现在模拟手机端的屏幕上这个背景只展示了2/3左右,并不能完全展示出来,这又是为什么呢?其实这里面涉及一个概念:css像素与设备像素

无可争议的是我们在代码内设置的px即为css像素,而iPhone5的设备分辨率是640*1136指的是设备像素。一般情况下在桌面上1px其实是等于1设备像素的。那么在移动端是不是一直都是1px都等于1设备像素?
首先,这里要分清几个概念:

设备像素
一个显示屏的成像原理是通过一系列的小点排列成一个大的矩形,不同的小点通过显示不同的颜色来显示成图像。这每一个小点被叫做一个物理像素。以许小珂提到的iphone5为例。iphone5的屏幕,分辨率是640设备像素*1136设备像素,意味着iphone5手机横向上排列了640个显像用的小点,在纵向上排列了1136个显像用的小点。另一个常见的数据叫每英寸像素取值(Pixel per inch,简称PPI),意思是每一英寸内的物理像素数量,也可以说是每一英寸内的物理像素密度。计算公式是

移动开发之像素的深入理解
公式中的屏幕尺寸指的是屏幕对角线的长度。一个显示屏的PPI越高,说明在同一大小的屏幕上能显示更多物理像素,能给图像提供更多细节。

CSS像素
作为Web开发者我们整天在CSS里用px作为长度单位。这里的px指的是CSS像素。浏览器里的一切长度都是以CSS像素为单位的。在非高清屏幕以及未缩放浏览器的情况下,一个CSS像素等于一个物理像素;而在搭载了苹果公司的视网膜显示屏等高清屏幕(PPI特别高,一个屏幕上的物理像素点非常多)的设备上,如果一个CSS像素仍等于一个物理像素,那么网页上的各种元素就变得非常小,用户很难看清,因此高PPI的设备中,一个CSS像素通常等于两个甚至三个物理像素(浏览器自动设定,不同浏览器设定的会不一样)。

谈到这里还要说下另外一个概念:dpr:devivePixelRatio设备像素缩放比,

px指css像素单位,dp指设备像素单位。由此可以得到css像素与设备像素的转换公式:1px = dpr的平方 * dp(在平面上计算)。

这里咱们在回到第一张图,大家可以通过谷歌开发者工具发现iPhone5的css像素是320px*568px,那么这个值是怎么计算出来的?最主要的一点大家要知道iPhone5的dpr等于2,这个dpr等于2是什么样子的?这里咱们看一张图:移动开发之像素的深入理解

 

这张图就代表了在平面上dpr等于2的情况,一个css像素等于四个设备像素。
从纬度上来讲一个css像素就等于两个设备像素。即1px = dpr* dp。因此可以得出iPhone5的设备像素即640设备像素*1136设备像素等于320px*568px css像素。
那么如何判断一个设备的dpr值呢?
这里提供一组数据:

移动开发之像素的深入理解
我们只需要计算出设备的ppi然后判断此ppi所在的范围就能得到设备的dpr值。
最后许小珂子在放一张图片作为此文章的总结:

移动开发之像素的深入理解
文章到此终于确定标题了,本来想总结viewport的知识,没想到被许小珂总结成了css像素和设备像素的知识了,跨度其实还是挺大的,不过这样也好,先从最基础的总结,之后在写viewport的知识。