一、适配问题
①移动端Web页面，即常说的H5页面、手机页面、webview页面等。
②适配问题产生的原因：手机设备屏幕尺寸不一，做移动端的Web页面，需要考虑在安卓/IOS的各种尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样做能更好地适配不同屏幕宽度的移动设备。
③适配的目标：在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）
④参考文章：移动端解决适配问题
二、移动端的一些概念
①viewport视口：是移动端特有的，是一个虚拟的区域，承载网页的。承载关系是浏览器、viewport、网页。参考MDN文档
②流式布局：就是百分比布局，非固定像素，内容向两侧填充
②物理像素(physical pixel)：又被称为设备像素，是显示设备中一个最微小的物理部件。每个像素可以根据操作系统设置自己的颜色和亮度。所谓的一倍屏、二倍屏(Retina)、三倍屏，指的是设备以多少物理像素来显示一个CSS像素，也就是说，多倍屏以更多更精细的物理像素点来显示一个CSS像素点，在普通屏幕下1个CSS像素对应1个物理像素，而在Retina屏幕下，1个CSS像素对应的却是4个物理像素。
③CSS像素：是一个抽像的单位，主要使用在浏览器上，用来精确度量Web页面上的内容。一般情况之下，CSS像素称为与设备无关的像素(device-independent pixel)，简称DIPs。CSS像素顾名思义就是我们写CSS时所用的像素。
④设备像素比dpr(device pixel ratio)：其定义了物理像素和设备独立像素的对应关系。它的值可以按下面的公式计算得到：设备像素比 ＝ 物理像素 / 设备独立像素。在Retina屏的iphone上，devicePixelRatio的值为2，也就是说1个css像素相当于2个物理像素。通常所说的二倍屏(retina)的dpr是2, 三倍屏是3。(通常说的二倍背景图就是解决失真问题)
⑤屏幕像素密度PPI(pixel per inch)：屏幕像素密度是指一个设备表面上存在的像素数量，它通常以每英寸有多少像素来计算(PPI)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。
二、主流适配方案（标准的移动端适配方案：使用流式布局和viewport设置相结合）
①适配目标：
- 网页内容的宽度必须和浏览器保持一致
- 默认显示的缩放比例和PC端保持一致（缩放比例1.0）
- 不允许用户自行缩放网页
②viewport的相关的属性（如果任何设置都没有，就是默认设置）
<meta name="viewport" content=""> <!-- 可以设置宽度(device-width当前设备的宽度) height:可以设置高度 initial-sacle:可以设置默认的缩放比例(1.0) user-scalable:可以设置是否允许用户自行缩放(=no) maxinum-scale:可以设置的最大缩放比例 mininum-scale:可以设置的最小缩放比例 -->
③适配设置：（Emment语法：mate：ev + tab键）
<meta name="viewport" content="width=device-width,initial-sacle=1.0,user-scalable=no">
三、非主流适配方案(手淘方案)
参考文章：手机淘宝的flexible设计与实现