[移动端]移动端设备属性

移动端web页面的开发，由于手机屏幕尺寸、分辨率不同，或者需要考虑横竖屏问题，为了使得web页面在不同移动设备上具有相适应的展示效果，需要在开发过程中使用合理的适配方案来解决这个问题。

移动端设备的一些属性

尺寸

想要实现移动端适配 就要认识下 显示设备的物理尺寸(屏幕对角线长度) 单位 “英寸”

我们用单位英寸描述屏幕的物理大小，如电脑显示器的17英寸，22英寸，手机显示器的4.8英寸，5.7英寸

英寸（inch，缩写为in）在荷兰语中的本意是大拇指，一英寸就是指甲底部普通人拇指的宽度。

英寸单位和厘米的换算：1英寸 = 2.54厘米

分辨率

分辨率决定了位图图像细节的精细程度

通常情况下，图像的分辨率越高，所包含的像素就越多，图像就越清晰，印刷的质量也就越好。同时，它也会增加文件占用的存储空间。

像素

说到像素我们第一时间会想到（Pixel) , 像素即一个小方块，它具有特定的位置和颜色。

图片、电子屏幕（手机、电脑）就是由无数个具有特定颜色和特定位置的小方块拼接而成。

像素可以作为图片或电子屏幕的最小组成单位。

在我们css布局中使用的px单位像素是一个相对单位，我们称之为逻辑像素

手机 显示器等物理设备上的像素点我们称之为物理像素

所以对应分辨率 我们也会区分出屏幕分辨率(物理)和图像分辨率(逻辑)。

屏幕分辨率

屏幕分辨率指的是一个屏幕具体是由多少个物理像素点组成

HUAWEI P40 Pro屏幕分辨率为 2640 x 1200 这表示手机分别在垂直和水平上所具有的像素点数。

iPhone XS Max和 iPhone SE的分辨率分别为2688 x 1242和1136 x 640。这表示手机分别在垂直和水平上所具有的像素点数。

图像分辨率

我们通常说的图片分辨率其实是指图片含有的像素数，比如一张图片的分辨率为800 x 400。这表示图片分别在垂直和水平上所具有的像素点数为800和400。

同一尺寸的图片，分辨率越高，图片越清晰

PPI

PPI(Pixel Per Inch)：每英寸包括的像素数。

PPI可以用于描述屏幕的清晰度以及一张图片的质量。

使用PPI描述图片时，PPI越高，图片质量越高，使用PPI描述屏幕时，PPI越高，屏幕越清晰。

在上面描述手机分辨率的图片中，我们可以看到：iPhone XS Max 和 iPhone SE的PPI分别为458和326，这足以证明前者的屏幕更清晰。

由于手机尺寸为手机对角线的长度，我们通常使用如下的方法计算PPI:

iPhone 6的PPI为

所以它每英寸约含有326个物理像素点。

DPI

DPI(Dot Per Inch)：即每英寸包括的点数。

这里的点是一个抽象的单位，它可以是屏幕像素点、图片像素点也可以是打印机的墨点。

平时你可能会看到使用DPI来描述图片和屏幕，这时的DPI应该和PPI是等价的，DPI最常用的是用于描述打印机，表示打印机每英寸可以打印的点数。

一张图片在屏幕上显示时，它的像素点数是规则排列的，每个像素点都有特定的位置和颜色。

当使用打印机进行打印时，打印机可能不会规则的将这些点打印出来，而是使用一个个打印点来呈现这张图像，这些打印点之间会有一定的空隙，这就是DPI所描述的：打印点的密度。

在上面的图像中我们可以清晰的看到，打印机是如何使用墨点来打印一张图像。

所以，打印机的DPI越高，打印图像的精细程度就越高，同时这也会消耗更多的墨点和时间。

DIP(设备独立像素)

实际上，上面我们描述的像素都是物理像素，即设备上真实的物理单元。

下面我们来看看设备独立像素究竟是如何产生的：

智能手机发展非常之快，在几年之前，我们还用着分辨率非常低的手机A，分辨率是320x480，我们可以在上面浏览正常的文字、图片等等。

但是，随着科技的发展，低分辨率的手机已经不能满足我们的需求了。很快，更高分辨率的屏幕诞生了它的分辨率是640x940，我们成为手机B

理论上来讲，在A手机上相同大小的图片和文字，在B手机上会被缩放一倍，因为它的分辨率提高了一倍。这样，岂不是后面出现更高分辨率的手机，页面元素会变得越来越小吗？

然而，事实并不是这样的，我们现在使用的智能手机，不管分辨率多高，他们所展示的界面比例都是基本类似的。乔布斯在iPhone4的发布会上首次提出了Retina Display(视网膜屏幕)的概念，它正是解决了上面的问题，这也使它成为一款跨时代的手机。

在iPhone4使用的视网膜屏幕中，把2x2个像素当1个像素使用，这样让屏幕看起来更精致，但是元素的大小却不会改变。

如果B手机使用了视网膜屏幕的技术，那么显示结果应该是下面的情况，比如列表的宽度为300个像素，那么在一条水平线上，A手机会用300个物理像素去渲染它，而B手机实际上会用600个物理像素去渲染它。

我们必须用一种单位来同时告诉不同分辨率的手机，它们在界面上显示元素的大小是多少，这个单位就是设备独立像素(Device Independent Pixels)简称DIP或DP。上面我们说，列表的宽度为300个像素，实际上我们可以说：列表的宽度为300个设备独立像素。

打开chrome的开发者工具，我们可以模拟各个手机型号的显示情况，每种型号上面会显示一个尺寸，比如iPhone X显示的尺寸是375x812，实际iPhone X的分辨率会比这高很多，这里显示的就是设备独立像素。

DPR(设备像素比)

设备像素比device pixel ratio简称dpr，即物理像素和设备独立像素的比值。

在web中，浏览器为我们提供了window.devicePixelRatio来帮助我们获取dpr。

我们可以通过js来获取当前设备的dpr

//如果设备是iPhoneX  
window.devicePixelRatio; //3 

在css中，可以使用媒体查询min-device-pixel-ratio，区分dpr：

@media (-webkit-min-device-pixel-ratio: 2),(min-device-pixel-ratio: 2){ 
	/*适配IPhone 两倍屏*/
}

当然，上面的规则也有例外，iPhone 6、7、8 Plus的实际物理像素是1080 x 1920，在开发者工具中我们可以看到：它的设备独立像素是414 x 736，设备像素比为3，设备独立像素和设备像素比的乘积并不等于1080 x 1920，而是等于1242 x 2208。

实际上，手机会自动把1242 x 2208个像素点塞进1080 * 1920个物理像素点来渲染，我们不用关心这个过程，而1242 x 2208被称为屏幕的设计像素。我们开发过程中也是以这个设计像素为准。

实际上，从苹果提出视网膜屏幕开始，才出现设备像素比这个概念，因为在这之前，移动设备都是直接使用物理像素来进行展示。

紧接着，Android同样使用了其他的技术方案来实现DPR大于1的屏幕，不过原理是类似的。由于Android屏幕尺寸非常多、分辨率高低跨度非常大，不像苹果只有它自己的几款固定设备、尺寸。所以，为了保证各种设备的显示效果，Android按照设备的像素密度将设备分成了几个区间：

当然，所有的Android设备不一定严格按照上面的分辨率，每个类型可能对应几种不同分辨率，所以，每个Android手机都能根据给定的区间范围，确定自己的DPR，从而拥有类似的显示。当然，仅仅是类似，由于各个设备的尺寸、分辨率上的差异，设备独立像素也不会完全相等，所以各种Android设备仍然不能做到在展示上完全相等。