移动端自适应屏幕方案

现在移动端尺寸越来越多，如果在不同宽度的设备上完美呈现效果也是前端程序员必备的功课。

通过一天的查找资料跟以前的经验，总结了以下的方案：

1：前端样式固定用320px宽度做，左右留白，背景用颜色或者背景填充。

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

图片用实际像素background-size: 100% 100%;

2：不写宽度，所有内容以中轴线为标准，左右铺开。

3：写好网页后用JS获取屏幕宽度，然后设置body:zoom（有时字体会有问题）或者scale（只适用于单页）缩放尺寸

4：参考淘宝方案http://www.html-js.com/article/Like-the-winter-flexible-design-and-implementation-of-the-mobile-phone-Taobao-cold

设置html的font-size和viewport来控制大小

备注：关于window.devicePixelRatio是设备上物理像素和设备独立像素(device-independent pixels (dips))的比例。
公式表示就是：window.devicePixelRatio = 物理像素 / dips

dip/dp/device independent pixels，设备独立像素）与屏幕密度有关

<script>
    (function(doc,win){
        var docEl=doc.documentElement,
        isIOS=navigator.userAgent.match(/iphone|ipod|ipad/gi),
        dpr=isIOS?Math.min(win.devicePixelRatio,3):1,
        scale=1/dpr,
        resizeEvt="orientationchange" in window?"orientationchange":"resize";
        docEl.dataset.dpr=dpr;

        var metaEl=doc.createElement("meta");
        metaEl.name="viewport";
        metaEl.content="initial-scale="+scale+",
        maximum-scale="+scale+",
        minimum-scale="+scale;
        docEl.firstElementChild.appendChild(metaEl);

        var recalc=function(){
            var width=docEl.clientWidth;
            if(width/dpr>640){
                width=640*dpr
            }
            docEl.style.fontSize=100*(width/640)+"px"};
            recalc();
            if(!doc.addEventListener){return}
            win.addEventListener(resizeEvt,recalc,false)
    })(document,window);
    </script>