移动端开发系列——像素与viewport

先抛3个概念，
px(CSS pixels)：虚拟像素，可以理解为“直觉”像素，我要这个元素宽高10px；
dp(device pixels)：设备像素（物理像素），可以理解为实际的像素，这个宽高为10px的元素在设备中实际用了多少个物理像素点表示；
dpr(device pixels ratio)：设备像素比，公式为1px = (dpr)^2 * 1dp，可以理解为1px由多少个设备像素组成；

3个概念整合理解就是：
我为一个元素设置的宽高为10px，那么实际在显示设备中用多少个设备像素真实表示呢？
dpr=2的话，那么1px由4个设备像素显示，如果是10px，那么显示设备实际用40个dp去显示10px；
dpr=1，则1px由1个设备像素显示；
px和dp的区别就是直觉认为只有10px和真实使用40dp；

为什么会出现dpr>=2的情形？dpr=1不是更加符合我的认知和理解吗？

还不是人们为了追求更高的分辨率所致，分辨率越高图像越清晰！！！；

但是Mac的Retina屏和一般PC的在相同尺寸下，图像却清晰许多，为肾？

dpr>=2所致啊！！！

别的品牌机子老老实实1px = 1dp，Mac却是1px = 4 dp，所以你直觉认为大家都使用同样多的像素点表示图像（这是没错滴），实际背后Mac用了多1倍（指的是dpr）的设备像素显示图像；

实际应用中，显示设备不会直接给你个px和dpr

你实际看到的是以下的参数，下面是肾6Plus的显示屏参数信息：
技术图片

再抛几个概念，可别晕咯...

英寸：这里指的是屏幕主对角线的尺寸，1英寸=2.54cm，5.5英寸约等于14cm（13.97cm）

分辨率：1920*1080像素，这里指的是物理像素（设备像素）

ppi（pixels per inch）：每英寸的像素点，这里肾6Plus为每英寸有401个像素点

那么ppi是如何计算出来的呢？
顾名思义，每英寸的像素点（设备像素），已知屏幕分辨率和主对角线的尺寸，则ppi等于

var 斜边尺寸 = V(1920^2+1080^2) V代表开根号
var ppi = 斜边尺寸/5.5
ppi = 401ppi

现在我们知道，ppi越高，每英寸像素点越多，图像越清晰；

和先前的知识点有什么关系？

毕竟这些参数是外国人先发明的，他们会优先选择自己熟悉的计量单位作为显示设备的工厂标准参数，因此ppi就用作显示设备的工业标准；

告诉业界人士，ppi达到多少是高清屏，此时对应的dpr是多少，而不直接告诉你我现在的显示设备dpr是多少

毕竟人们直接听到像素分辨率会更加有反应

下面是不同ppi对应的dpi：

ldpi	mdpi	hdpi	xhdpi
ppi	120	160	240	320
默认缩放比	0.75	1.0	1.5	2.0

【注】Retina屏都是dpr>=2的高清屏

肾6Plus的dpr为3，是超高清屏；

到目前为止，我们了解到：
给你一个显示设备，设备分辨率为1920*1080，尺寸为5.5英寸，可以计算出其ppi = 401，根据ppi得知其dpr = 3，
由此可以该设备1px = （3^2）dp，其虚拟像素为1920/3 = 660px，1080/3 = 360px，即虚拟分辨率为360*660；
此时，如果你在代码设置元素的宽高为360*660到的话，会发现它的实际尺寸就等于肾6Plus的屏幕尺寸；
【ppi】

技术图片

viewport原理解析

一个很有意思的现象是，当你把上面的代码在chrome下使用设备模拟方式，模拟肾6Plus的时候，神奇的事情发生了，该元素设置的宽高明明就是手机的宽高，按常理应该占据整个屏幕，实际却是：

技术图片

究竟是怎么一回事？，如何解决这一问题呢？

好吧，作为实用主义者的你们（不是我哟），先讲解决方案：

技术图片

在meta标签有一个viewport的属性，可以为这个属性设置width；
肾6Plus默认的width是980px，所以元素宽是360px，实际显示的尺寸是360px*360/980=132.24px（不信可以自己测试一下哟）；

现在只要将viewport的width设置为360px，那么元素就可以占满全屏了；

现在就要引入另一个概念：viewport

viewport的原理在于：

先将页面渲染在一个width为显示设备默认尺寸的viewport上，如肾6Plus为980px；
然后将viewport等比例缩放至整个手机屏幕上；

例如上例中，元素宽高为360*600px，先将元素渲染在宽度为980px的viewport上，然后等比例缩放在整个手机屏幕上；

viewport就是连接手机屏幕和页面的中间层

为什么要多此一举呢？

想象一下，如果没有中间层，直接将一个页面宽度为980px的直接缩放至320px，那么里面的DOM节点将会进行重绘，很有可能导致排版错乱；
viewport的作用是将所有的DOM节点先绘在宽度为980px的viewport上，然后整个viewport统一缩放，这样就能保证排版的正确性；

关于viewport，涉及两个概念：

layout viewport：布局viewport，可以理解为放置页面的幕布
visual vewport：视窗viewport，可以理解为屏幕的视窗
比如：

肾6Plus的visual viewport的宽度为360px，layout viewport为980px；
360px是屏幕视窗的虚拟像素，980px是放置页面的像素；

回顾一下，前面元素出现的缩放现象：

根据肾6Plus的物理分辨率1920*1080以及5.5英寸的屏幕，计算出ppi = 401-> dpr = 3 -> 虚拟分辨率为640*360px；

画一个宽度为360px的元素，理应充满整个手机屏幕，但是由于viewport的作用 -> 360px的元素画在980px的layout viewport上，然后等比例缩放在360px的visual viewport上-> 最终你看到的就是，360px的元素无法填充整个屏幕；

先前的一个解决办法是，改变layout viewport，即<meta name="viewport" content="width=360">，让整个layout viewport就是360px，那么元素将填充整个屏幕；

以上都是世界观，给人一些概念性的理解，无法实操，下面就是方法论

实际移动端开发，我们只需关注layout viewport，知道每个移动设备提供给我们多大尺寸的幕布，但是移动设备型号那么多，不可能一个个手动设置width呀！！！

动态设置layout viewport

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

上面的设置表示让layout viewport总是等于设备宽度，即visual viewport；

技术图片

【注】细心的童鞋可能会注意到，肾6Plus的虚拟分辨率为什么不是640*360px，具体解答可以参考知乎问答

获取visual viewport和layout viewport的api

window.innerWidth：表示窗口的宽度（包含滚动条），即visual vewport的宽度
document.body.clientWidth：表示body元素的宽度（不包括border），即layout viewport的宽度

移动端其他初始化设置

intial-scale:页面首次显示时，可视区域的缩放级别，取值1.0则页面按实际尺寸显示，无任何缩放；
no-scalable：是否允许缩放

一个完整的viewport属性的设置为：

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">

上述完整的意思是，layout viewport等于设备的宽度，首次显示页面时不进行缩放也不允许用户缩放；

demo

小结

一开始讲px/dp/dpr/ppi的意义在于铺垫背景知识
理解上述知识后，给你一个移动设备的物理分辨率，如iPhone6 Plus19201080以及尺寸5.5inches，可以计算出其ppi为401->dpr = 3，从而测算出手机的虚拟分辨率为640360px；
原则上，你开发一个640*360px的元素就可以填充整个手机屏幕，但是由于viewport机制作用，效果未达预期
由此引出viewport概念，viewport可以分为visual viewport（视窗尺寸）和layout viewport（放置页面的“幕布“），iPhone6 Plus默认值为980px；
通过meta标签的viewport属性，可以动态设置layout viewport，实战中只需要设置：

<meta  name="viewport" content="width=device-width,initial-scale=1,no-scalable=no">

你还可以通过window.innerWidth和document.body.clientWidth（前提是不设置body的宽度）分别获取visual viewport和layout viewport；

移动端开发系列——像素与viewport

目录

移动端开发的基本观点

像素基础知识

viewport原理解析

小结