关于移动端的适配

　　记得第一次做移动端页面的时候，发现手机上显示的页面好小啊，还有横向滚动条出现，当时心里面是“我次奥~怎么这样子啊~”。后来才知道是因为移动设备的分辨率相对于桌面电脑来说都比较小，所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的页面宽度设为980或者1024（也可能是其它值，这个是由设备自己决定的），

　　那么如何让页面正常的在移动端显示呢？很简单我们需要设置viewport,我们在网上最常见的设置如下：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

　　它规定了页面的宽度为设备宽度，缩放为1，且不允许用户进行缩放。这样子就能解决横向滚动条已经页面小的问题了。

　　那么问题又来了，iphone4和iphone6的屏幕大小不一样啊，那么同样一个width为100的元素在两个手机上 占比不一样啊(我次奥~做前端怎么这么苦啊)。那么如何做到一个设计稿在不同尺寸的手机屏幕下完美呈现呢?有一段时间我用了target-densitydpi=device-dpi 这个属性，这样 css中的1px会等于物理像素中的1px。然而这个属性很多手机都不支持（大兄弟！能不能不搞事啊）。有的时候想想算了吧，某些手机上大点就大点呗（作为一个有时候太随意的前端表示很惭愧，设计师会打你的你知道么、怎么每次做出来跟设计稿不一样啊。）

　　那么到底有没有更完美的解决方案呢？答案是当然有啦。我们就来参考一下淘宝的做法吧,原理其实也很简单，就是用rem以及设置initial-scale来实现等比适配。

　　initial-scale是用来设置页面的初始缩放值，我们得到的页面宽度是 屏幕宽度/initial-scale（当我们同时设置width和initial-scale时，我们将取得两者最大的来作为页面的宽度）。然后我们rem基准设置为 页面宽度/10,这样我们就可以很方便的 通过rem来等比缩放了。

　　以iphone4、和iphone6 为例，我们的设计稿是宽640，那么假设一个div 宽64，高64；

　　iphone4下

//设计稿基准 640/10=64px; 那么64 转成相应rem就是 64/64=1rem;
//基准rem 320/10=32, 那么宽1rem就是 1x32=32px;(请注意单位哦)从而实现了等比缩放。
html{font-size:32px; }
div{width：1rem;height:1rem}

　　iphone6下

//设计稿基准 640/10=64px; 那么64 转成相应rem就是 64/64=1rem;
//基准rem 375/10=37.5px, 那么宽1rem就是 1x37.5=37.5px;(请注意单位哦)从而实现了等比缩放。
html{font-size:37.5px; }
div{width：1rem;height:1rem}

　　哈哈这样就实现了等比缩放咯，不过对于Retina屏来说它们的 设备像素比率可能为2或者3。也就是说1px 能够显示2或者3的物理像素。也就是说 我们在iphone4下可以把页面的宽度设置成320/0.5=640px 的宽度，从而能够更高清。设备像素比率可以通过window.devicePixelRatio 来获取

　　iphone4下

//设计稿基准 640/10=64px; 那么64 转成相应rem就是 64/64=1rem;
//基准rem 640/10=64px, 那么宽1rem就是 1x64=64px;(请注意单位哦)从而实现了等比缩放。
html{font-size:64px; }
div{width：1rem;height:1rem}

　　那么接下来我们简单的用js来判断屏幕动态的添加meta标签吧

     

(function(win){
      var doc = win.document,
            docEl = doc.documentElement,
            metaEl = doc.createElement('meta'),//新建一个meta标签
            devicePixelRatio=win.devicePixelRatio,//设备像素比
            dpi=1,
            scale=1,//缩放比
            winwidth=window.screen.width;//屏幕宽度
      if(devicePixelRatio>1){
            dpi=devicePixelRatio;
      }
      scale=1/dpi;
　　   metaEl.setAttribute('name', 'viewport');
　　   metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');//设置viewport 属性。
      if (docEl.firstElementChild) {//插入到head中
            docEl.firstElementChild.appendChild(metaEl);
      } else {
            var wrap = doc.createElement('div');
            wrap.appendChild(metaEl);
            doc.write(wrap.innerHTML);
      }
      var rem = winwidth*dpi / 10;//计算出基准rem
      docEl.style.fontSize = rem + 'px';//设置基准rem
})(window)

;

　　

　　这样就简单的实现了适配啦。当然淘宝已经有相应的类库啦。我们直接引用一下就ok啦。

      git地址：https://github.com/amfe/lib-flexible

      配上一个简单的示例：http://h1.nbb.pw/Home/LessonIndex/qrshare  (在手机端查看哦~)

      ps：每天记录一点点、进步也就一点点啦~~