1px 到底是多大

1、引言

　　1px 到底是多大？这应该是一道很不错的面试题。且看：

　　一、iphone6s 的分辨率是1920px * 1080px

　　二、iphone6s 全屏截图文件的尺寸是1242px * 2208px

　　三、iphone6s 的宽度是414px

　　四、iphone6s 不加 viewport 的状况下，window.innerWidth = 980px

　　五、iphone6s 加 viewport 且 scale 都为1的状况下，window.innerWidth = 414px

　　六、iphone6s 加 viewport 且 scale 都为.5的状况下，window.innerWidth = 829px

　　这些 px 单位都是啥？

 

2、几个关键概念

　　设备像素：设备的物理像素，其尺寸大小是绝对的

　　逻辑像素：CSS 的像素单位，其尺寸大小是相对的，也称为独立像素

　　分辨率：屏长的设备像素 × 屏宽的设备像素

　　dpi（dots per inch）：像素密度，表示水平或垂直方向每英寸长度的像素数目

　　ppi（pixels per inch）：像素密度，表示沿对角线每英寸长度的像素数目

　　（dpi 和 ppi 其实不就是一回事吗，呵呵）

　　缩放因子（Scale Factor）：逻辑像素相对于设备像素的放大比例，可经过 window.devicePixelRatio 得到，但两者并不彻底等同

　　关系一：

　　设备尺寸 × 像素密度 = 分辨率（设备像素）

　　举例：

　　iphone6s 对角线长度为5.5 inches，像素密度401 ppi，分辨率 1920 * 1080，计算可得对角线的设备像素为2205.5。

　　5.5 * 401 = 2205.5

　　关系二：

　　逻辑像素 = 设备像素 × 缩放因子

　　举例：

　　iphone6逻辑像素为375 * 667，分辨率为750 * 1334，缩放因子为2

　　1个逻辑像素 = 设备宽度的1/375

　　1个设备像素 = 设备宽度的1/750

　　1/375 = 1/750 * 2

 

3、纠结的缩放

　　设备像素都是固定的，因此逻辑像素大小由缩放因子决定，那么缩放因子由什么决定？到底放多大才合适？

　　对于桌面设备，逻辑像素一般就等同于物理像素，原本是不用考虑缩放问题的。一切问题的根源就在于：屏幕变得愈来愈高清，ppi 愈来愈大。好比我如今用的 PC 是1920px的高清屏，若是没有缩放，全部的东西看起来都会比较小，所以须要放大：

　　因此决定缩放因子大小的，就是像素密度，密度越大、越高清的屏幕，须要的缩放比例就越大。

　　PC 上的缩放比例是自定义的。那么移动端的缩放比例是怎么肯定的呢？

　　答案是 viewport。

　　viewport 就是屏幕那块儿固定的可视区面积。默认状况下，移动端浏览器会将 viewport 宽度设为980px（也有多是1024px 或其它值），也就是说1px = 设备屏幕宽度的1/980。这跟缩放因子没有任何关系。

　　这时的1px 很是小，全部的元素都变得很是小，移动端浏览器之因此这么作，是为了尽量完整的显示 PC 端的网页，而后容许用户经过缩放来查看细节。

　　若是咱们不但愿采用默认的设置，就须要人工设置 viewport：

　　<meta name="viewport" content="width=device-width">

　　将 viewport 宽度设为设备宽度，那么这里的设备宽度究竟是什么呢？这就跟缩放因子有关系了。iphone4 ~ iphone6的 ppi 都是326，缩放因子都是2，因此1个逻辑像素的大小等于2个设备像素。

设备	设备分辨率	缩放因子	逻辑分辨率	ppi
4s	640 * 960	2	320 * 480	326
5s	640 * 1136	2	320 * 568	326
6	750 * 1334	2	375 * 667	326

　　对于 iphone6，1px = 屏幕宽度的1/375，相比1/980放大了很多，而这时候的1px 就是一个比较理想的大小，即比较符合咱们在 PC 端使用 px 时的感觉。也就是说326的 ppi对应的放大比例是2，326 : 2是一个经验比率（1px = 1/163inch），实践检验比较妥，苹果就这么干的，因此就这么定了。因此若是是652的 ppi，则理想的放大比例为4。

　　实际上在 CSS2.1 中有这么一条：若是显示设备的像素密度与典型的电脑显示器差别明显，用户代理应当从新调整像素值。建议以阅读者在一臂距离处观察到的像素密度为96 dpi 的设备上的一个设备像素做为参考像素，大约为1/96 inch，0.26mm。

　　可是这条建议实在是跟不上屏幕进化的速度，因此在 PC 端都没有获得执行，更况且移动端。你能够在 PC 上画一个100px 的正方形，按照上述标准，这个100px 的正方形应该和一个一元硬币（直径25mm）差很少大小。你比较一下，若是正方形比硬币大，就说明你的屏幕 ppi 有些低。（分辨率调得过低或者是放大比例调得过高除外）。

　　我算了下，我电脑上一个逻辑像素大约为1/113 inch，那么移动端将1/163 inch 做为逻辑像素的参考大小，就说明我电脑上一个16px 的字，在手机上会缩小到大约三分之二，这是符合个人使用经验的。

 

4、iphone6 plus

       iphone6s的 ppi 达到了401，按照比率，它的缩放因子应该等于2.6。

设备	设备分辨率	缩放因子	逻辑分辨率	ppi
6s	1080* 1920	3	414 * 736	401

　　可是2.6这一奇葩的比例不太方便切图，因此 iphone6s 就直接改为了3，而后再总体压缩87%（2.6 / 3）。这也是为啥iphone6s 全屏截图的尺寸是1242 * 2208。

 

5、三种场景

一、ppi 适配

　　ppi 适配要解决的问题是：在最小基本单位尺寸不固定的状况下，如何找到一个固定大小的尺寸单位。

　　对于文字，咱们但愿16px 的文字不管在什么样的屏幕下看起来都是同样大的。也就是说咱们但愿这里的 px 是一个实际物理尺寸固定的单位。

　　设置 viewport 就能够实现这个目的：

　　<meta name="viewport" content="width=device-width">

　　1个逻辑像素的尺寸 = 1 / ppi * 缩放因子 = 1/163 inch

　　因此说设置 viewport 本质上是把 px 变成了一个“绝对单位”。

　　那么用 cm 或 mm 做为尺寸单位行不行呢？我认为是符合此场景的，只不过有些反人类。

 

二、resolution 适配

　　分辨率适配要解决的问题是：找到一个相对单位，使得同一尺寸在不一样大小的屏幕上看上去相对大小一致。

　　好比一张宽100%，高100unit 的 banner 图，咱们但愿它在任何大小的屏幕上可以等比例缩放，所以咱们须要这里的 unit 是一个相对单位。

　　vw 和 vh 就是很好的相对单位，但考虑到兼容性，只有用 js 实现一个 vw，具体可参见文末连接。

 

三、dpr 适配

　　devicePixelRatio 适配要解决的问题是：在设置了 viewport，width=device-width 的状况下，如何画出1px（设备像素）的问题。

　　dpr=2意味着 CSS 中的1px 会用两个设备像素来渲染，在 iphone6s 上更会用3个设备像素来渲染。

　　解决的方案大体有：用小数、用图片、用渐变、用阴影、用 transform 缩放。手机淘宝的作法是使用 js 动态设置 viewport 的 initial-scale。

设备	1px大小	devicePixelRatio	缩放因子	逻辑分辨率	initial-scale
iphone6s	3个设备像素 1/414屏宽	3	3	414 * 736	1
	1.5个设备像素 1/828屏宽	3	1.5	828 * 1472	.5
	6个设备像素 1/207屏宽	3	6	207 * 368	2

　　以上三类问题能够总结为：绝对单位问题、相对单位问题、最小单位问题。

 

参考：

《手机淘宝的 flexible 设计与实现》

http://www.html-js.com/article/2402

《7种方法解决移动端 Retina 屏幕1px 边框问题》

http://www.jianshu.com/p/7e63f5a32636

《使用 flexible 实现手淘 H5 多终端适配》

http://www.w3cplus.com/mobile/lib-flexible-for-html5-layout.html