移动端适配问题

1、适配问题

①移动端Web页面，即常说的H5页面、手机页面、webview页面等。

②适配问题产生的缘由：手机设备屏幕尺寸不一，作移动端的Web页面，须要考虑在安卓/IOS的各类尺寸设备上的兼容，针对移动端设备的页面，设计与前端实现怎样作能更好地适配不一样屏幕宽度的移动设备。

③适配的目标：在不一样尺寸的手机设备上，页面相对性的达到合理的展现（自适应）或者保持统一效果的等比缩放（看起来差很少）

④参考文章：移动端解决适配问题

2、移动端的一些概念

①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)。屏幕像素密度与屏幕尺寸和屏幕分辨率有关，在单一变化条件下，屏幕尺寸越小、分辨率越高，像素密度越大，反之越小。

2、主流适配方案（标准的移动端适配方案：使用流式布局和viewport设置相结合）

①适配目标：

• 网页内容的宽度必须和浏览器保持一致
• 默认显示的缩放比例和PC端保持一致（缩放比例1.0）
• 不容许用户自行缩放网页

②viewport的相关的属性（若是任何设置都没有，就是默认设置）

    <meta name="viewport" content="">
    <!-- 
        width:能够设置宽度(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">

3、非主流适配方案(手淘方案)

参考文章：手机淘宝的flexible设计与实现