1px 究竟是多大

一、引言

  1px 究竟是多大?这应该是一道很不错的面试题。且看:

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

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

  3、iphone6s 的宽度是414px

  4、iphone6s 不加 viewport 的情况下,window.innerWidth = 980px

  5、iphone6s 加 viewport 且 scale 都为1的情况下,window.innerWidth = 414px

  6、iphone6s 加 viewport 且 scale 都为.5的情况下,window.innerWidth = 829px

  这些 px 单位都是啥?

 

二、几个关键概念

  设备像素:设备的物理像素,其尺寸大小是绝对的

  逻辑像素: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

 

三、纠结的缩放

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

  对于桌面设备,逻辑像素通常就等同于物理像素,本来是不用考虑缩放问题的。一切问题的根源就在于:屏幕变得越来越高清,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 的字,在手机上会缩小到大约三分之二,这是符合我的使用经验的。

 

四、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。

 

五、三种场景

1、ppi 适配

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

  对于文字,我们希望16px 的文字无论在什么样的屏幕下看起来都是一样大的。也就是说我们希望这里的 px 是一个实际物理尺寸固定的单位。

  设置 viewport 就可以实现这个目的:

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

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

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

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

 

2、resolution 适配

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

  比如一张宽100%,高100unit 的 banner 图,我们希望它在任何大小的屏幕上能够等比例缩放,因此我们需要这里的 unit 是一个相对单位。

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

 

3、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

 

posted @ 2017-04-11 10:18 kidney 阅读(...) 评论(...) 编辑 收藏