iPhone7的几种关键词(一)(图)

关键字

如果我们去苹果官方网站查看iPhone 7的介绍，我们可以看到其显示屏的介绍如下：

我们以7加为例，提取以下关键字（这些关键字与我们今天要说的内容紧密相关）：

下面我们详细讨论这些关键字。让我们从第二个开始，因为第一个的解释需要使用以下一些关键字。

5. 5英寸

这是相对简单的，它是显示屏对角线的长度（我们可以通过勾股定理来计算，甚至可以用尺子来测量）。各种尺寸的不同iPhone如下：

注意：1英寸（inch）= 2. 54厘米（cm）

1920 x 1080像素分辨率

1920 x 1080像素分辨率表示显示器的分辨率为1920px x 1080px。

正如我们之前所说，显示器上的每个图形都由一个像素组成。下图可以帮助您非常生动地理解：

现在我们了解了像素，现在我们可以解释1920px x 1080px分辨率的含义。这意味着在此iPhone 7 plus 5. 5英寸屏幕上，垂直高度为1920像素，水平宽度为1080像素。

注：通常，您可以右键单击计算机以查看屏幕分辨率（Windows操作系统），而手机可以在“设置>关于本机”中找到分辨率。如果您不知道，也可以参考以下两个链接：

像素密度-PPI

每英寸像素数（PPI）也称为像素密度，这表示每英寸的像素数。 PPI值越高，图片的细节越丰富。

计算公式如下：

简单地说，使用我们上面提到的分辨率使用勾股定理在对角线上找到像素，然后将像素除以对角线的长度。您将获得每英寸的像素数。

有关PPI的更多信息，请参阅：

Retina HD显示屏

所谓的“视网膜”是一种显示技术，可以将更多像素压缩到屏幕中以实现更高的分辨率并提高屏幕显示的精细度。这种分辨率足以使人眼无法在正常观看距离下分辨出各个像素，也称为视网膜显示屏。

视网膜既不是指分辨率也不是PPI，而是指视觉效果。计算公式为（您无需了解）：

p代表人眼的视角，h代表像素间距，d代表裸眼和屏幕之间的距离。满足以上条件的屏幕可使肉眼看不到单个物理像素。这样的显示器可以被Apple称为“视网膜显示器”。

将常用距离替换为上式表明：

我们已经知道Retina显示屏了，那么Retina HD显示屏是什么？

但是，Apple正式没有自己发明的单词的特定概念。我们可以简单地将其理解为具有更好显示效果的升级版本。有关详细信息，请参阅：让我们讨论Retina和Retina HD显示器

有关视网膜的更多信息，请参阅：

devicePixelRatio（设备像素比率）

我们已经了解了以上四个概念，但距离最终的问题还有点距离。然后，我们介绍第五个概念：devicePixelRatio。

在解释这个概念之前，让我们看一下演示（CSS大小）。

使用chrome调试工具，我们模拟iPhone 7（因为iPhone 6、 7的尺寸相同，因此您实际上可以使用iPhone 6对其进行模拟），并检查相应演示元素的CSS宽度和高度，您会发现宽度和高度分别为：375px * 667px。 （演示将视口的宽度设置为device-width，否则该宽度将为980px。）

此宽度和高度恰好是我们前面提到的iPhone 7分辨率（750px * 1334px）的一半，这表明两者之间存在一定的关系。 devicePixelRatio恰好用于描述两者之间的比例关系，我们将在下面详细介绍。

注意：实际上，当您打开Chrome浏览器并开始在移动终端上进行调试时，我们可以看到与设备无关的像素和DPR（如果看不到DPR，请打开右侧的设置并找到设备像素比率），如下图所示：

通过上面的描述，我们可以得出iPhone 7的devicePixelRatio为2（750px / 375px = 2），即2x屏幕。那么，这个2x屏幕与我们的普通标准屏幕有什么区别？

对于标准屏幕，渲染2px2px的框将使用2px2px的物理像素，例如我们的普通计算机屏幕；但是对于2x屏幕，渲染2px2px框将使用（2px 2）（2px 2）物理像素，例如我们的iPhone 4、 5、 6、 7），如下所示：

注意：在3x屏幕出现之前，视网膜显示屏通常指2x屏幕，因此，如果您查看以前的数据，将会有很多这样的情况。

有关devicePixelRatio的更多信息，请参考：

面对问题

熟悉这些概念后，我们将开始解决我们需要面对的问题。由于devicePixelRatio不再为1，因此我们的物理像素和与设备无关的像素不再相等，因此在实际的Web开发中我们面临两个问题：图像模糊，1px边框加粗

图片模糊

我们知道位图（png，jpg，gif等）由像素组成，每个像素都有特定的位置和颜色值，我们称其为位图像素，如下所示：

在标准屏幕上显示位图时，位图像素对应于物理像素，从而确保了完整的保真度显示。但是，在2倍屏幕上时，它需要放大四倍（在宽度和高度上是两倍），以保持相同的物理像素大小，这会丢失很多细节并导致失真，这就是我们通常所说的图片。模糊问题。如下图所示：

那么如何解决这个问题呢？毕竟，要使位图像素与物理像素相对应。由于物理像素已经固定并且无法更改，我们可以更改位图像素吗？答案是肯定的。

我们可以将要使用的图像放大一倍。例如，如果要使用的图像大小为2px2px，则可以使用4px4px图像，并将图像大小设置为2px * 2px，这恰好适用于2x屏幕，而标准屏幕为“减少像素采样（a一定程度的浪费），如下所示：

这解决了2x屏幕上图片模糊的问题，3x屏幕也是如此。

边框加粗1px

为说明此问题，让我们首先看一个1px的演示。屏幕截图如下（iPhone 6屏幕截图）：

如果将上面的图片与手机系统上的1px边框进行比较，如下所示：

我们将发现，对于上面的两条上下线，下部的线的粗细是正确的，而上部的线显得有点粗。但是上面的线是用纯1px边框生成的，而下面的线实际上是通过使用transform压缩1px高度的一半来实现的，该高度等于0. 5px的高度。为什么会这样？

这是因为1 CSS像素实际上对应于2x屏幕中的2物理像素，因此为了获得真实的1px厚度，我们必须使用0. 5px进行模拟。目前，除了ios8 +可以直接使用0. 5px单位外，其余的必须通过仿真来解决。具体的实现方法有很多，可以参考：解决移动终端视网膜屏幕1px边框问题的7种方法。

注意：我通常在上面的1px演示中使用该方法。

随附：3倍于iPhone 6 / 6s / 7 plus的屏幕

我们知道iPhone 6 / 6s / 7 plus的分辨率为1080px1920px，其独立于设备的像素为414px736px。根据我们的计算，其devicePixelRatio（1080/41 4）不等于3，但是我们通过了窗口。devicePixelRatio或在仿真中为3。

这是因为它已被缩放，如下图所示（有关详细信息，请参阅《神秘化的iPhone 6屏幕》的图形描述）：

参考资料

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/tongxinshuyu/article-375150-1.html