两周前，PO提了个扫描二维码访问H5页面的需求，由于自己一直没有接触过移动端，也对这其非常感兴趣，所以自告奋勇地接下了这个需求！
不过，接触了后发现其中的知识点与坑是真的多！

1、必须得知道的名词

在PC端，我们其实不需要关心那么多，根据UI给的设计稿PSD图切就好了，量出来多少像素就是多少像素，最多对于宽屏还是窄屏做下处理就好了。但这些在移动端是行不通的！
比如说分辨率，原来在我的理解里，屏宽 * 屏高就是分辨率，这个在原来的PC端也没什么问题，但是，自从Apple推出了高清屏，也就是Retina屏后，这个理解就有问题了！所以，什么是高清屏？当年乔帮主对Retina得定义是：显示器像素密度只要超过 xxx ppi就无法区分出单独的像素。

• PPI(Pixels Per Inch): 每英寸所拥有的像素数目，也叫像素密度

什么？屏幕就这么大，难道像素密度不是固定的吗？其实，我之前也是这么认为的，然而非也，这也涉及到了几个概念。

• 物理像素：显示器上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
• 逻辑像素：也就是我们所说的CSS像素，是一个抽象的单位，用来精确度量页面上的内容。
• 设备无关像素：是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关系统转换为物理像素。
• 设备像素比：物理像素和设备独立像素的对应关系，其值为在某一方向上 物理像素 / 设备独立像素。

所以嘛，我们一直所说的像素，其实指的是逻辑像素，但最终我们看到的效果，是由硬件渲染成的一个个物理像素，也就是说我们指定的CSS像素最后需要与物理像素对应起来。
比如我上手的iPhone6，设备独立像素为375 * 667，devicePixelRatio为2，那么其分辨率就是750 * 1334.如果我指定页面100%占满屏幕，就是说1个CSS像素要对应4个物理像素（长宽都是2倍嘛），由于像素作为最小不可分割的单位，所以其余3个像素会就近取色，也就造成了看上去会模糊。（放张网上盗的图）

image.png

现在我们也明白了，移动端为什么会有@2x和@3x之类的图片了吧，就是为了在不同devicePixelRatio的设备上能够清晰地显示！

2、移动端适配

移动端最麻烦应该就是适配问题了，毕竟市面上的各类机型太多了，以Apple家的为例，Android就不提了...

image.png

那么多机型，总不能为每个机型都量身定做吧？那么开发成本太高了！目前流行的做法是UI给出针对某一机型的设计稿，比如iPhone6的750 * 1334，前端对每个机型做适配。
那么怎么适配呢？用百分比做单位？可以是可以，但计算比较麻烦，还有像padding之类的百分比是根据父元素的width计算，需要注意！那么没有更好的办法了吗？有的! rem了解一下！

• rem: CSS单位，1rem等于根元素的font-size大小（HTML元素）

那么我们根据页面的大小，动态计算HTML元素的font-size不就行了？对的！但前提我们得设置viewport，也就是视口。那么视口又是什么呢？

• viewport: 指的是浏览器上显示网页内容的区域。

其实viewport我们一直都在使用，只是没注意到而已。我们知道一个块元素不设width情况下，会继承自其父元素的width，若父元素也没有设置，则再向上继承，如此，一直到body元素继承自html元素。那么html元素的width继承自谁呢？答案就是viewport！

在移动端，viewport的大小其实并不等于浏览器的可视区域，为什么呢？因为移动端浏览器也想显示PC端的网页，所以会将默认的viewport的width设置为980px或者1024px，然后再根据自身的屏幕进行缩小。不这么做的话，移动设备再宽也比不上PC，所以viewport要是等于移动端浏览器的可视区域的话，网页的布局一定会乱掉！

ppk大神将viewport分成了layout viewport、visual viewport、idea viewport。有兴趣的可以看看这篇博客。https://www.cnblogs.com/2050/p/3877280.html

因此，在移动端，我们首先得要在head中添加一行meta标签，重新设置viewport。

<meta name="viewport" content="width=device-width, initial-sacle=1.0">

以上代码的意思是，将viewport的width设置为设备可视区域的width，并设置初始缩放值为1.0，也就是不缩放。
还可以设置其它的参数：

• maximum-scale：允许用户缩放到的最大比例。
• minimum-scale：允许用户缩放到的最小比例。
• user-scalable：用户是否可以手动缩放。