移动端像素概念，viewport，适配

想必大家对移动端像素的概念比较疑惑，总结一下我们经常会听到的几个词。

一、屏幕尺寸

平时我们通常提到手机的尺寸，比如iPhone6是4.7英寸的。手机的屏幕是以英寸为单位的。我们平时使用最多的单位是：毫米、厘米、米。对于英寸并不熟悉，首先我们先来换算一下单位：1英寸（inch）=2.54厘米（cm）。那么，英寸到底表示 的是什么呢？是手机的宽还高？原来英寸代表的意思是：手机屏幕对角线的长度。

常见的屏幕尺寸有：2.4、2.8、3.5、3.7、4.2、5.5、5.6等

 

 

二、屏幕分辨率

指在横纵向上的像素点数，单位是px。1px=1个像素点数（注：这里的像素指的是物理设备的1个像素）。

一般以纵向像素 * 横向像素 表示一个手机的分辨率。比如：1980*1080

在同一个设备上，它的像素个数是固定的，这是厂商在出厂时就设置好了的。只有不同的设备之间，才有像素大小的区别。

这里有人提出一个问题：既然在同一个设备上，像素点数早就设定好了，那电脑上可以调整分辨率是怎么回事？

 

其实，当我们调整电脑分辨率的时候，无论怎么调，像素点数还是那么多。

入上图我的电脑所示，系统推荐的是1920x1080 px的分辨率，这表示什么意思呢？刚才我们也提到了，微软在这块屏幕上横向设置了1080个像素，竖向设置了1920个像素。无论怎么调整，这个数字是不会变了。那么，为什么我们还能调整分辨率呢？比如我们调整到1336x760，按照定义，横向就是760个像素，竖向就是1336个像素了。其实呢，你把分辨率调成1336x760，系统就会分配给你1336x760有效像素个数，也就是真实的色彩块。其他的个数呢，就由系统自作主张，通过一系列运算给你一个模拟色彩块，填充成正好1920x1080 个色彩块。这些拿来充数的像素块，和真实的像素块放到一起，我们不易察觉。

苹果系列手机分辨率：

型号	屏幕分辨率	PPI
3GS	320x480	163
4s	640x960	326
5c	640x1136	326
5s	640x1136	326
6	750x1334	326
6+	1242x2208~1080x1920	401

注：屏幕大小和分辨率是没有关系的，屏幕大的分辨率不一定。

我们知道苹果手机是从4s开始火起来的，因为它使用了高清屏。那么什么是高清屏呢？

三、高清屏

高清屏（Retina）的概念，主要是从乔布斯发布的Retina设备开始的，Retina显示屏又叫做视网膜屏。事实上，Retnia这个词更接近于一个营销名词而非技术名次。因为从某种意义上来说，这是苹果为宣传自己的产品所创造出的名词。苹果也的确为这个名词申请了专利。

 

主要功能：

把更多的像素点压缩至一块屏幕上，具备足够高的物理像素密度从而使人体肉眼无法分辨其中单独像素点的液晶屏。

特点：

• 一种具备超高像素密度的液晶屏。

• 同样大小屏幕上显示的像素点由一个变成多个。

高清屏和普通屏的区别：

• 高清屏（Retain）和普通屏相比，相同区域的物理像素点数，高清屏是普通屏的4倍。

• 高清屏的笔记本电脑色彩保真特点的全面展现

 

四、屏幕像素密度（PPI）

屏幕像素密度也叫像素密度或屏幕密度

屏幕像素密度，即屏幕上每英寸可以显示的像素点的数量，英文pixels per inch，简称PPI。这个英寸跟之前手机屏幕的尺寸一样，也是对角线的长度。所以我们可以这么理解屏幕像素密度，即在一个对角线长度为1英寸的正方形内所拥有的像素数。

屏幕像素密度与屏幕尺寸和屏幕分辨率有关。他们之间有一个公式：

</