这是我参与8月更文挑战的第1天，活动详情查看：8月更文挑战
基础概念
当我们介绍一个设备的屏幕时，我们会怎么描述呢。除了说很大很细腻之外，还有更精确的概念吗。
以上是从苹果官网截取的对iPhone 12 的屏幕描述。可以看到主要有 尺寸、像素分辨率、ppi 这三个词。他们分别是什么含义呢。下面我们一一解读。
屏幕尺寸
屏幕尺寸大小是用户非常关键的一个指标。如上所示，苹果官网在最明显的位置标明了各个机型的屏幕尺寸。屏幕尺寸一般用屏幕对角线的物理长度表示，单位为英寸。所以获取屏幕尺寸最直接的方式就是用尺子来量屏幕的对角线长度。
注：英寸是一个绝对的物理单位，1英寸（inch）=2.54厘米（cm）。
分辨率&物理像素
如苹果官网的介绍，iPhone12 屏幕除了介绍尺寸外，还有 2532 x 1170 像素分辨率，是怎么回事呢。
6.1 英寸 (对角线) OLED 全面屏 2532 x 1170 像素分辨率，460 ppi
在讲解分辨率之前，我们要明白一个概念。在我们手机上呈现的一条线、一个面、一张图像都是由最小的单位像素来表示的，你也可以简单理解为是由一个个小方块组成的。看看下面的图就懂了。
所以呢，分辨率2532 x 1170 像素分辨率的意思就是，在 iPhone12 这个6.1英寸的屏幕上，在竖向的高度上有2532个像素块，在横向宽度上有 1170个像素块。
注：一般来说电脑可以直接右键查看屏幕分辨率（windows操作系统），Mac 上是关于本机 -> 屏幕 Tab，而手机可以在“设置>关于本机”中找到分辨率。
我们把分辨率的像素称之为物理像素或设备像素（如 iPhone 7 的物理像素为 750px * 1334px），它是显示设备中一个最微小的物理部件。
PPI - 像素密度
除了像素分辨率以外，还有介绍屏幕的另外一个重要的 ppi 参数又是什么概念呢。
2532 x 1170 像素分辨率，460 ppi
Pixels Per Inch（PPI）也叫像素密度，所表示的是每英寸所拥有的像素数量，PPI值越高，画面的细节就会越丰富。
那么像素密度、分辨率、尺寸的关系是什么？其关系简单的可以用一个公式描述。
但对于 iPhone 12 ，用 2532 x 1170分辨率、6.1英寸带入公式计算出来的 PPI 并不是 460，为什么呢。
Math.sqrt(2532x2532+1170x1170)/6.1 = 457.2543463119592
我们在苹果官网找到了下面一行小字，原来6.1英寸是四舍五入来的数字。
iPhone 12 显示屏采用曲线优美的圆角设计，四个圆角位于一个标准矩形内。按照标准矩形测量时，屏幕的对角线长度是 6.06 英寸 (实际可视区域较小)。
再次带入计算
Math.sqrt(2532x2532+1170x1170)/6.06 = 460.27252681566847
四舍五入后即为官网宣称的 460 PPI。
设备独立像素
尺寸、分辨率、PPI的几个概念，都是面对消费者的。前端日常开发，更多的接触的是 414x736 px、375x667 px、320x568 px这样的宽高数值，如下所示。这个又是什么维度的描述呢。
我们将375px667px 这样的CSS 的尺寸像素称之为设备独立像素（device-independent pixels 简称为“DIPs”）或 CSS 像素（如 iPhone 12 的设备独立像素为 390px844px），它是一个抽象的单位，主要使用在浏览器上，用来精确的度量（确定）Web页面上的内容。
DPR - 设备像素比
devicePixelRatio，简称为 DPR，用来描述物理像素与设备独立像素的比例，其值等于 “物理像素 / 设备独立像素”。
从上边的信息看到，iPhone 12 分辨率像素宽高为1170×2532，设备独立像素宽高为390x844，1170=390x3，2532=844x3，所以 iPhone12 的 DPR 为 3。
devicePixelRatio 值为 1 时就是我们的标准屏，值为 2 时则是我们俗称的 2 倍屏（2x），同样 3 就是 3 倍屏（3x）。
Retina
初识 Retina
苹果公司在2010年的WWDC上发布了iPhone4，第一次向世人展示了retina屏幕，并在后续发布了一系列r屏产品。
所谓“Retina”是一种显示技术，可以将更多的像素点压缩至一块屏幕里，从而达到更高的分辨率并提高屏幕显示的细腻程度。这种分辨率在正常观看距离下足以使人肉眼无法分辨其中的单独像素。
Retina 既不是指分辨率，也不是单独指PPI，而是指视觉效果。我们一般称 devicePixelRatio 大于或等于2的屏幕为 Retina 屏幕(r 屏)，否则为 非 r 屏。
WWDC 2010上非r屏与r屏显示效果对比
两块面积相同而PPI不同的屏幕，自然是PPI大的那块总像素数量多，其展示细节的潜力和能力也越大，如下图所示，只用4x4个像素来表达一条曲线，自然不如8x8个像素更加细腻平滑。后者的PPI是前者的2倍，后者像素数量则是前者的4倍。
非r屏与r屏在显示字母a的左上角边沿时的细节对比
Retina的原理
受 windows操作系统的影响，多数人心中会产生这样的逻辑：分辨率越高，字会显得越小。这是因为整个屏幕的面积主要由像素面积构成，即在相同面积下，分辨率越高，像素数量也越多，单个像素的面积也一定越小。于是高分辨率就对应着小像素，而像素小，则由像素构成的文字就小。所以就有了『分辨率越高，字会显得越小』的印象。
可是，苹果的r屏产品并没有让显示的文字变得很小，这又是怎么回 事呢？既然苹果产品的2倍r屏所包含的像素数量约为同面积非r屏的4倍，即每个像素尺寸约为非r屏像素的1/4，那为什么显示出来的文字没有缩减成1/4呢？
这是因为操作系统的HiDPI渲染方式，它决定了一个文字或图标最终以多少个像素来表达。2倍 r屏它在表达屏幕上每个元素时，都使用了4倍于非r屏的像素个数。这样算下来，像素尺寸为1/4，像素数目为4倍，于是最终渲染出来的文字和图标的大小与非r屏的相当。
举例说明，对一个标准屏来说，渲染一个 2px*2px 的盒子将会使用 2px* 2px 物理像素，如我们的普通电脑屏；但是对于一个 2 倍屏来说，渲染一个 2px*2px 的盒子将会使用 （2px* 2） *（2px* 2） 物理像素，如我们的 iPhone 4、5、6、7，如下图：
确保了显示尺寸不缩水、PPI翻倍的前提下，这种HiDPI的渲染效果在改善视觉方面的提升效果如下(rMBP(2560x1600)和MBP(1280x800)下的菜单栏)：
小结一下，r屏设备之所以视觉效果好，高PPI提供了硬件基础，系统HiDPI渲染方式提供了软件支持，二者缺一不可，即：
高PPI(硬件) + HiDPI渲染(软件) = 更细腻的显示效果(retina)
如果低 PPI+ HiDPI渲染(软件)，或者 高 PPI 但没有HiDPI渲染(软件)，那么也达不到 Retina 的显示效果。具体讨论见 有关retina和HiDPI那点事。
Retina 都需要 326 DPI 吗？
Retina Display是2010年苹果推出来的一个营销词汇，它并不严谨。当时乔老爷子在iPhone4发布会上宣称把iPhone4的屏幕分辨率由iPhone3GS的320×480提升至640×960，第一次用到了这个词，326ppi也许就是在那时刚好被大众定义为Retina Display的最低底限。
但通俗地讲，只要一块显示屏上的像素颗粒在某个视距(一般默认为正常视距)下可以细微到肉眼无法观察到屏幕上物体的边缘颗粒感或锯齿状的程度，那它其实就可以算作是一块Retina Display。
Retina 有计算公式如下：
a 代表人眼视角，h 代表像素间距，d 代表肉眼与屏幕的距离。符合以上条件的屏幕可以使肉眼看不见单个物理像素点，就被苹果称作“Retina显示屏”。
将通常使用距离代入上公式可知：
- 手机显示器的像素密度达到或高于 300ppi 就不会再出现颗粒感（视线距离在35CM左右）
- 而苹果电脑的 Retina 显示器像素密度只要超过 200ppi 就无法区分出单独的像素（视线距离在60CM左右）
因为视距的原因，达到同样的 Retina 效果，物理屏幕的 ppi 并不需要一致，视距越大，ppi 要求越低。
Retina 屏幕的适配兼容
由于 devicePixelRatio 不再是1，我们的物理像素与设备独立像素不再对等，所以在实际网页开发时面临了2个问题：图片虚化、1px边框变粗
兼容问题1：图片虚化
我们知道，位图（png, jpg, gif等）是由一个个像素点构成的，每个像素都具有特定的位置和颜色值，我们称之为位图像素，如下图：
当一个位图在标准屏显示时，一位图像素对应的就是一物理像素，这样就保证了一个完全保真的显示。但是当在 2 倍屏下时，物理像素面积是图像素面积的4倍(css 中的1设备独立像素相当于2物理像素)，图片需要要放大四倍（宽高各两倍）来保持相同的物理像素的大小，这样就会丢失很多细节，造成失真的情形，也就是我们常说的图片虚化问题。如下图：
那么怎么解决该问题呢？我们可以把要使用的图片扩大一倍，如要用的图片大小为 2px 2px，我们可以使用 4px 4px 的图片然后设置图片大小为 2px * 2px，这样对于2倍屏则正好，而标准屏则减少像素取样（一定程度上的浪费），如下图：
这样就解决了我们的图片在2倍屏的虚化问题，对于3倍屏也是一样的道理
兼容问题2：1px 边框变粗
我们先看一个demo，截图如下（iPhone 6截图）：
如果我们把上图与我们手机系统上的 1px 边框进行对比，如下图：
我们会发现，上面两个上下线条，下线条的粗细才是正确的，上线条就显得有点粗了。但是上线条我们是用纯正的 1px border生成的，而下线条我们实际是采用transform压缩了1px高度的一半模拟实现的，也就相当于 0.5px 的高度了。为什么会这样呢？
这是因为在2倍屏时1 CSS 像素实际对应2个物理像素, 所以为了实现真正的 1px 粗细，我们得使用 0.5px 来模拟。目前除 ios8+ 可以直接使用 0.5px 单位外，其余皆得通过模拟的办法搞定。具体实现办法有很多，大家可以参考：7种方法解决移动端Retina屏幕1px边框问题。
一些探讨
像素的大小是固定的吗？
从上面可以看到， pixel 这个单位可以指数字图像的数据 pixel，可以指屏幕分辨率-物理像素，也可以指代操作系统的设备独立像素……在不同语境下的意义差别很大。
所以可以说，像素是没有实际的物理尺寸的。它不是一个绝对的单位。不像现实生活中的英寸或厘米。
举个例子：
上面的这两张图，第一张是苹果6手机的屏幕参数，第二张是华为荣耀7的屏幕参数。同样是一英寸，同样都是像素，为啥苹果手机一英寸有469个像素，华为只有424个呢？我们知道，英寸是长度单位，它有固定的物理尺寸。那么问题就只能出在了像素身上。这说明，像素这个东西，在苹果手机上变小了。所以，像素这个东西，就像金箍，能变大能变小。
再举个例子：
CSS 元素宽高 1px*1px，在 2倍 Retina 屏幕下，实际渲染物理像素 2px*2px，在非 Retina 屏幕下，实际渲染物理像素 1px*1px 。和物理世界的绝对比较，它也是个相对的单位。
