移动端web适配

移动端web适配我了解的总共有4种方法：

• 固定宽度
  定死页面宽度，直接写一个div把宽度订到设计稿的宽度或者你需要的宽度，然后让它居中，再在这个div盒子里进行你的页面开发，这种开发的缺点就是当遇到较大的屏幕时，屏幕的两边会流出白边，影响美观，体验不好。

• 宽度百分比

• 使用媒体查询
  但媒体查询一般是针对几种主流分辨率进行定制，用户体验也不能说有多好，毕竟在一些分辨率变换的瞬间，布局会突然性地变化。

• rem+viewport
  通过采用rem单位的动态计算的弹性布局。这里详细介绍一下：

首先在做移动端开发的时候一定会加上viewport：

<meta name="viewport" content="width=width-device,initial-scale=1;minimum-scale=1,maximum-scale=1,user-scalable=no"/>

• name=”viewport”是来告诉浏览器这个meta属性是设置设备视口的
• content=”“是设置视口的具体内容
• width=device-width这段代码告诉浏览器，页面的宽度就等当前设备的视口宽度，
• initial-scale=1,代表初始的页面缩放比例为1，
• minimum-scale=1代表缩放的最小比例为1,
• maximum-scale=1代表缩放的最大比例为1
• user-scalable=no代表不允许用户进行手动缩放。

但是会有如Retina屏这种高清屏幕的出现，他会把画布的大小放大到原来的2倍，也就是说现在我写的css里的1px在屏幕上展示的是2px的宽度。

为了在屏幕上仍显示1px的边框，就只能对页面进行缩小，即缩放比例设为0.5：

<meta name="viewport" content="width=width-device,initial-scale=0.5;minimum-scale=0.5,maximum-scale=0.5,user-scalable=no"/>

这里有一个新名词：缩放比，js可以通过window.devicePixelRatio来获得。比如上面提到的Retina屏幕的dpr就是2，那么我们的缩放比例设为1/2。因此我们就要动态获取设备的dpr，并设置meta：

var dpr = 1/window.devicePixelRatio;
meta.setAttribute('content', 'initial-scale=' + dpr +