携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第 1 天，点击查看活动详情 >>
适配的目的：在不同尺寸的屏幕上让视图显示完整且不会变形
一、页面适配涉及概念了解
屏幕分辨率、css像素、物理像素、设备独立像素傻傻分不清楚？
-
屏幕分辨率：屏幕分辨率是指纵横向上的像素点数，单位是px。
屏幕分辨率越低，屏幕上显示的像素点越少，单个像素点尺寸越大；相反，屏幕分辨率越高，屏幕上显示的像素点越多，单个像素点尺寸越小。ps: 这里加深一下：如 都是1px,分辨率不同，像素点尺寸不同。
-
css像素：就是我们做网页时用到的css像素单位，是web编程中的一种抽象概念，实际不存在，用于逻辑上衡量像素的单位，也可称作逻辑像素。
-
设备独立像素：也就是与设备无关的逻辑像素。设备独立像素是一个整体概念，包括了css像素，比如:css像素，只是在android 机中，css像素不叫 “css像素了”，而叫“设备独立像素”。
-
物理像素：设备像素，就是上面屏幕分辨率中提到的真实的像素点，是设备能控制显示的最小单位。
-
总之，在web开发中，css像素，是设备独立像素，也是逻辑像素。设备像素就是物理像素。
-
ppi（pixel per inch）：每英寸像素点，表示每英寸所包含的像素点数目，每英寸物理像素点越多，密度越大，显示的越精细，类似分辨率，也是来描述像素密度和显示效果的
-
dpr（device pixel ratio）：设备像素比，物理像素/css像素， 在JS中可以通过 window.devicePixelRatio 获取。
当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；
当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；
当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。
所以说，设备像素比越大，1css像素占得设备像素越多，看起来就越大。
二、视口设置
1、viewport
viewport就是设备的屏幕上能用来显示网页的那一块区域，也就是浏览器上用来显示网页的那部分区域。
如果不设置viewport,大部分移动设备它默认宽度980px（不要问为什么，历史进化来的）
<meta name="viewport"
content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
| 属性名 | 取值 | 描述 |
|---|---|---|
| width | 正整数或device-width | 定义视口的宽度，单位为像素 |
| height | 正整数或device-height | 定义视口的高度，单位为像素，一般不需要 |
| initial-scale | [0.0, 10.0] | 定义初始缩放值 |
| minimum-scale | [0.0, 10.0] | 定义最小的缩放比例，必须小于或等于maximum-scale设置 |
| maximum-scale | [0.0, 10.0] | 定义最大的缩放比例，必须大于或等于minimum-scale设置 |
| user-scalable | yes/no | 是否允许用户手动缩放页面 默认值yes |
2、设备像素比（dpr)
dpr = n, 1 css像素的内容，放大到 n 倍显示
如: dpr = 2, 那么 1 css像素的内容会被放大到2倍显示； 即1px = 2*2个设备像素；
显示每个CSS像素的物理点变多了，更精细了，看起来就更清晰了
我们设置viewport的目的就是为了让 css像素 = 设备像素，所以最好的方式是根据 dpr 动态设置缩放比例：
(function () {
var metaEl = document.createElement('meta');
var scale = devicePixelRatio;
metaEl.setAttribute('name', 'viewport');
metaEl.setAttribute('content', 'initial-scale=' + (1 / scale) + ', maximum-scale=' + (1 / scale) + ', minimum-scale=' + (1 / scale) + ', user-scalable=no');
document.documentElement.firstElementChild.appendChild(metaEl);
})();
