一、移动端多设备适配

  参考了手机淘宝：

  针对安卓所有设备，devicePixelRatio(简称dpr)，统一当作“1”处理，即一倍屏；然后viewport的宽度就等于device-width，但是淘宝的做法是没有对viewport的width做明确指定，仅指定了scale值；因为浏览器实际上会根据scale来设置viewport的宽度；

  针对ios，则存在2倍，3倍屏；

 最终就是根据dpr来确定html根元素的字体大小，所有元素的宽高以rem单位来展示；

  这里有一个基准值，就是设计稿的尺寸，比如设计稿是640*960，则这个基准值是64；具体可参考这篇文章：

;(function(){            var win = window, doc = document, docEl = doc.documentElement;            var ios = win.navigator.appVersion.match(/iPhone/i), dpr = win.devicePixelRatio || 1, finalDpr = dpr;            //仅针对iPhone做倍屏处理，即其它平台dpr=1;            if(!ios){                finalDpr = 1;            }            var scale = 1 / finalDpr;            var metaEl = doc.querySelector('meta[name="viewport"]');            metaEl.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=0');            docEl.setAttribute('data-dpr', finalDpr);            var width = docEl.getBoundingClientRect().width;            //针对安卓屏幕宽度超过设计稿尺寸时，限制最宽为640,也就是说rem最大为64px；            if(width / finalDpr > 640){                width = 640 * finalDpr;            }            docEl.style.fontSize = width  / 10 + 'px';        })()

另外一个注意事项是，页面初始化是需要指定一个viewport（淘宝是可以动态创建）