像素的一些知识

[ditunes]

设备像素

概念——什么是设备像素

设备像素即硬件像素是显示屏上能够显示的最小的点，通常由红、绿、蓝三个子像素构成。从这三个子像素中穿过的光线混合起来，为我们创造了一个像素的颜色。硬件像素与屏幕上的物理元素一一对应，不能拉伸、扭曲，也不能再分。这些特点让硬件像素很像原子——任何设计作品中最基本的单位。
比如iphone 4的分辨率为640_960 而同样大小的iphone 3gs则为320_480

什么是 设备独立像素（density-independent pixel dip）

在我看来，设备独立像素是一种基于隐匿设备像素概念的虚拟描述层，类似我们常常提到的Virtual Dom，他只是程序逻辑像素（例如 css pix）的一种表达，它与设备像素之间的映射关系可由设备来控制。例如：iphone 4的分辨率为640_960 而同样设备尺寸大小的iphone 3gs则为320_480，那么在iphone4设备上 css pix =》 device pixel 关系是如下图所示（）：

而在iphone 3gs中则是1个css pix = 1个device pixel

像素密度

• 每英寸像素（pix per inch）
  PPI表示每英寸所能容纳的设备像素个数，在相同设备尺寸下，该值越高则其分辨率越高，能够以更高的密度显示图像。下图解释了如何计算PPI

• 设备像素比（devicePixelRatio DPR）

通过上面描述的方式得到PPI之后，参照下表就可以知道设备像素比了

• 计算公式：设备像素比 = 物理像素 / 设备独立像素
• 页面中获取设备像素比：
• window.devicePixelRatio
• -webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)

---

位图像素

位图图像由多个像素点构成，每一个像素点分配了像素的颜色值和特定位置。我们常见的RGB、CMYK等颜色制式就是表示对颜色的编码。不同编码会导致图片大小不同，如RGB 每一个颜色需要8bit来表示，而一个像素点是有RGB三种颜色构成，那么一个像素点就会要占据3byte的数据。100*100像素大小的位图的文件大小为29.29kb。

理论一个设备像素去表示一个位图像素，然而在retina手机上，对于页面中通过 <img width='100px' height='100px' src="100*100.jpg"/> 显示 100_100 的位图图像则需要200_200个像素点表示。因为位图中只存储了100_100个像素点的数据，则多出来的点则需要设备根据一定的算法去计算取近似值，最后的结果是图片变得模糊。为了保证不模糊，上述img标签需要使用 200_200位图像素图片现效果与100_100在非retina中一致即 <img width='100px' height='100px' src="200_200.jpg"/> 。

---

viewport

什么是 layout viewport & visual viewport & ideal viewport ?

viewport即表示浏览器可视区域所能呈现内容大小。这句话要如何理解呢可以看下图：

iphone4 的设备理想化条件下可视区域能够容纳320*480px内容大小;而该页面默认的viewport为1280px，也就是说可以在该屏幕尺寸下容纳1280px宽的内容，那么如何能容纳这么多的像素内容呢？设想用一个镜头拍摄一个人的全身像，由于镜头尺寸有限无法容纳全身像，只有通过拉远镜头的方式才能使得全身可以被镜头容纳，此时的全身像在镜头中呈缩小状态。那么同理只有通过缩小页面的方式，用1个设备像素通过一定计算去表示多个css pix 才能实现有限的像素呈现超过此范围的内容。所以你会发现这个页面的图片实际上是很模糊的。

在此实际内容范围 称为layout viewport，可视区域所能容纳的内容范围称为visual layout

如果觉得无法理解，我们还可以这样考虑，全身像实际尺寸就是layout viewport 当我们调整镜头对焦距离就所呈现不同画面的大小就是visual viewport。镜头的物理大小是固定的 但呈现的画面的实际尺寸（visual viewport）却可以很多样，其实际通过调整镜头距离来实现的（通过略缩）。

这时候有人提出能否存在ideal viewport，即首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容；第二，显示的文字的大小是合适，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。即这种viewport使得页面与移动端完美适配——————移动设备的理想viewport。

ideal viewport并没有一个固定的尺寸，不同的设备拥有有不同的ideal viewport。例如iphone 5的ideal viewport宽度都是320px也就是320px 即表示 iphone屏幕的宽度。

visual viewport & ideal viewport 关系

• visual viewport width = ideal viewport width / scale
• viewport 的略缩是参照ideal viewport 也就是说当scale=0.3，那么visual viewport width = 0.3 * ideal viewport width 这也就是<meta name="viewport" content="initial-scale=1">等同于<meta name="viewport" content="width=device-width ,initial-scale=1">

---

参考资料
移动端高清、多屏适配方案
viewport sizes
viewport 详解
A tale of two viewports — part one
A tale of two viewports — part two