本节书摘来异步社区《高性能响应式Web开发实战》一书中的第2章，第2.1节，作者： 李光毅 责编： 杨海玲，更多章节内容可以访问云栖社区“异步社区”公众号查看。
2.1 像素密度
图2-1所示的截图来自苹果中文网站对iPhone 6的一段技术规格描述，加灰底的文字部分的“PPI”即为本节所要讨论的内容。PPI这个概念的复杂之处在于，它的意义会随着上下文的改变而变得大相径庭，例如，它可以用于描述图片文件的某些属性，可以作为打印时的可配置参数。在这里我们只谈论它作为设备屏幕特征的情况。在本书后面的内容中，若无特殊说明，PPI都代指本含义。
PPI（Pixel Per Inch）直译为“像素每英寸”。这样翻译其实有些晦涩，如果考虑到它实际想表达的意思，可以把它译为像素密度（在维基百科中，PPI这个名词也是归属于Pixel density [1]）。和常常谈论的人口密度、建筑密度类似，表达的是某个量在指定面积内的密集情况。图2-2很直观地描述了这个测量单位。
图2-2中从左至右同样3个1平方英寸单位面积的正方形面积中，谁的像素越多谁的像素密度就越高。
但是，你是否想过上面一直在谈论的像素究竟指的是什么？“呃，像素不就是在书写样式时使用的单位px吗？”其实不尽然。我们姑且把这一类像素称为CSS像素，留作下一节讨论。在谈论它们之前，我们先看看另一类像素——设备像素。
设备像素在英文中对应为device pixel或physical pixel，所以也可译为物理像素。无论是早期的CRT显示器还是如今的LCD显示器，现实的原理都是通过将一系列的矩形小点排列成一个大的矩形，让不同的小点呈现不同的颜色，最终来组成一幅完整的图像。例如，图2-3所示就是LCD显示器上一个4×4个设备像素排列成的矩阵。
图2-3中的每一个“点”（dot）就是设备像素。在LCD显示器中，每一个设备像素又是由3个分别显示红绿蓝的子像素（subpixel）组成。LCD显示器的显示功能是通过调整每一个设备像素的子像素明暗来实现的，具体原理如图2-4所示。
像素密度中所指的像素是设备像素，鉴于设备像素亦可称为物理点，所以PPI也可以称为DPI（dots per inch，每英寸点数）。但请注意这样的等价只有在描述显示设备的特征时才成立。在其他行业的上下文中两者含义并不同。
设备像素密度的计算方式正如它英文单词定义的一样所见即所得：使用对角线上的设备像素值，除以对角线的英寸长度，即为像素密度。图2-5为iPhone 5对应的计算像素密度的图解。
我们当然希望像素密度越高越好（手机厂商也的确在往这个方向努力），因为像素密度越高意味着在有限的手机屏幕面积上能容纳的设备像素越多，能够展现更多的画面细节。同时因为肉眼几乎无法分辨物理像素点，设备看上去更加自然和平滑，原理如图2-6所示。
但高像素密度同样也带来了副作用：单位面积内容纳的设备像素越多，也就意味着单个设备像素面积越小，如图2-7所示。
可以预见的一种情况是，一个4×4像素组成的图片素材在标准像素密度（以下简称为标清）的设备（如普通的桌面显示器）上看上去有硬币大小，但是到了高像素密度（以下简称为高清）的设备上却只有指甲盖大小，如图2-8所示。
反过来我们可以推论，如果想让高清设备与标清设备上的图片看上去同样大小，那么高清设备上的图片素材应该具有更多的像素，如图2-9所示。
以一台23英寸的显示器为例，它的横向和纵向分别排列着1920×1080个设备像素，那么它的最高分辨率就可以达到1920×1080，我们称这个分辨率为原生分辨率（native resolution）或者物理分辨率（physics resolution）。
而屏幕只有5英寸的三星Galaxy S4的屏幕同样是由1920×1080个设备像素组成的。根据刚刚的结论，因为单个设备像素的面积过小，在普通显示器上可见的图片素材有可能此时在S4上几乎是很难分辨的。
手机厂商不可能没有留意到这个问题。为了设备的可用性，即图标和文字可以被正确识别和准确点击，在高清设备上的各类素材视觉上必须保证与标清设备同样大小。他们的解决方法很简单：如果素材在高清设备上显示过小，就把所有尺寸都放大一倍就好了（准确来说，Galaxy S4放大了9倍）。原来图片上的一个像素单位由一个设备像素单位显示，现在则由9个设备像素（3×3）单位显示，效果就是将图片做拉伸处理。如果网站提供的图片像素不够高，则会出现模糊情况，如图2-10所示。
用iPhone 3GS和iPhone 4是最佳的对照实验，两者拥有相同的屏幕尺寸，但是iPhone 4的像素密度几乎是iPhone 3GS的2倍，像素是后者的4倍。但是两者屏幕上应用图标视觉上大小却是一模一样的，因为后者系统将所有的元素进行了4倍的放大（长2倍×宽2倍）。不过按照常识来说，将位图放大4倍务必会造成图片模糊。例如，下面这个例子为同一张图片在高清（左，模糊）和标清（右，清晰）设备上的对比，如图2-11所示。
但感官上iPhone 4画面（如首屏图标）不仅没有模糊素材，反而看上去更细腻，是因为iPhone 4素材包含的像素数量是前者的4倍，尺寸也是前者的4倍，而设备像素足够小，能将细节全部展现出来。这同样也是Retina工作的原理。
在高清设备中，为了解决设备像素过小的问题，系统分辨率下每个像素会等于多个设备像素，而这个比值称为设备像素比（Device Pixel Ratio，DPR）。
从另一个方面来说，iPhone 3GS和iPhone 4都保持了相同的系统分辨率——480×320，但是iPhone 4的设备像素达到960×640，每一个系统分辨率下的像素由2个设备像素组成。这样就能容纳更多的细节。
请再次注意，放大素材的前提是被放大的素材最好有足够的尺寸和像素，否则多余的像素只能由系统计算出来而导致看上去模糊。这也是高清设备常常被诟病的地方。
