H5移动多终端适配全解 - 从原理到方案

前端在构建页面时与PC端和移动端都要打交道，在PC端开发的时候关注的问题主要是兼容性问题，宽度高度之类的问题很自然的以浏览器宽度做为标准，开发没啥障碍。但这一套在PC端展示的网页放到移动端的浏览器上看就会发现并不是预期的那样，比如有的可能浏览器自动缩放网页让整个内容能够在可视区域展示，但内容会缩小；有的可能会出现横向滚动条。这些都不是理想的浏览状态，理想的网页展示应该是用户进入页面不需要手动缩放就能够看清页面的内容也没有横向滚动条。要如何去实现移动端网页展示达到理想效果涉及到很多因素，但主要包括三个方面：像素（pixels）、屏幕（screen）、视口（viewport）、缩放（scale）。
本文试图根据几篇介绍这方面的文章结合自己的理解来阐述移动端网页适配的问题。核心原理很简单，但要把这个问题想通透需要了解一些知识点。本文也是由于用到淘宝的flexible方案引发的探究，其中一些理解或许有误，还请指正。

一、像素（pixels）

生活中我们经常说到像素，对像素的概念就好像是一个个“点”，屏幕由不同数量的点排列构成不同的分辨率，一张图片由不同的像素点构成不同的大小，其实在这里像素被泛化了，像素还可以细分下去。同时我们经常将像素说成长度的单位，但实际上我们说1像素其实是一个1 x 1的小方块，它的面积是1。

设备像素

设备像素又称物理像素，是显示设备（PC、手机显示屏等）最小的物理部件，设备像素由操作系统控制来发光填色值，来让我们在视觉上看到相应的效果（如50 x 50的红色方块）。设备像素做为物理属性的存在是固定不变的，开发人员不可能通过程序控制设备像素数量上的增加减少。

CSS像素

前端在写网页的时候用的长度单位是px，属于CSS像素。CSS像素是抽象的，抽象意味着它没有物理属性的实体依据，它可以收缩放大。简单的理解为CSS像素点是有面积的，一个个CSS像素点铺起来盖在设备的显示屏上，其面积随着浏览器的缩放比例而同步缩放。例如在PC上的浏览器中，定义一100 x 100 的红色方块，缩放比例为100%的情况下，一个CSS像素是与一个设备像素完全重叠的。当缩放比设置为50%即缩小一半，CSS像素会等比缩放一半，那一个CSS像素的面积就只占100%情况下的四分之一了，所以视觉上看到方块变成了50x50的大小（即占了50x50的设备像素）。
注意：此时浏览器中检查元素大小会发现红色方块的大小仍旧为100x100，只是CSS像素的面积缩小了！
但是，到了移动终端，由于高密度显示技术出现，比如苹果的Retina显示屏中，当缩放比是100%的时候，一个CSS像素占的面积是4个设备像素的面积，即一个CSS像素横向宽度覆盖了2个设备像素的宽度。缩放比为100%时一个CSS像素占多少个设备像素是由设备像素比（dpr）决定的，dpr为2，则占两个，dpr为3则占三个。dpr的取值可以通过 window.devicePixelRatio 得到。

二、屏