淘寶移動端適配

;（function（win，lib）{
    var doc =  win。文件 ; // win = window，lib = window.lib;
    var docEl =  doc。documentElement ;
    var metaEl =  doc。querySelector（' meta [name =“viewport”] '）;
    var flexibleEl =  doc。querySelector（' meta [name =“flexible”] '）; //這樣的寫法沒有嘗試過
    var dpr =  0 ;
    var scale =  0 ;
    VAR TID;
    var flexible =  lib。靈活 || （LIB。靈活 = {}）;

    //創建元：vp，並根據設備屏幕像素比來設置dpr的值，設置scale = 1 / dpr，保留小數點後2位;
    //當設置過的元標籤之後，其根據其自定義的縮放放比來設置
    if（metaEl）{
        控制檯。警告（'將根據已有的元標籤來設置縮放比例'）;
        var match =  metaEl。getAttribute（' content '）。match（/ initial \  - scale =（[ \ d \。 ] +）/）;
        if（match）{
            scale =  parseFloat（match [ 1 ]）;
            dpr =  parseInt（1  / scale）; //獲取屏幕像素比
        }
    } else  if（flexibleEl）{
        var content =  flexibleEl。getAttribute（' content '）;
        if（content）{
            var initialDpr =  content。match（/ initial \  - dpr =（[ \ d \。 ] +）/）;
            var maximumDpr =  content。match（/ maximum \  - dpr =（[ \ d \。 ] +）/）;
            if（initialDpr）{
                dpr =  parseFloat（initialDpr [ 1 ]）;
                規模=  parseFloat（（1  / DPR）。toFixed（2））;   
                // 3.1415.toFixed（2），保留2位小數點
            }
            if（maximumDpr）{
                dpr =  parseFloat（maximumDpr [ 1 ]）;
                規模=  parseFloat（（1  / DPR）。toFixed（2））;    
            }
        }
    }

    //當沒有設置的元標籤之後，根據設備信息來設置屏幕縮放比
    if（！ dpr &&  ！ scale）{
        var isAndroid =  win。導航儀。appVersion。match（/ android / gi）;
        var isIPhone =  win。導航儀。appVersion。比賽（/ iphone / gi）;
        var devicePixelRatio =  win。devicePixelRatio ;
        if（isIPhone）{
            // iOS下，對於2和3的屏，用2倍的方案，其餘的用1倍方案
            if（devicePixelRatio > =  3  &&（！ dpr || dpr > =  3））{                
                dpr =  3 ;
            } else  if（devicePixelRatio > =  2  &&（！ dpr || dpr > =  2））{
                dpr =  2 ;
            } else {
                dpr =  1 ;
            }
        } else {
            //其他設備下，仍舊使用1倍的方案，但是FS並不是固定的
            dpr =  1 ;
        }
        scale =  1  / dpr;
    }


    //給文檔設置自定義屬性，保存DPR的值
    docEl。setAttribute（' data-dpr '，dpr）;

    //創建的元標籤，設置初始比，最小比和最大比均爲規模值，並將其插入到頁面
    //設置了縮放比，那麼相當於這個屏幕渲染在一個被放大的畫布之上。
    if（！ metaEl）{
        metaEl =  doc。createElement（' meta '）;
        metaEl。setAttribute（' name '，' viewport '）;
        metaEl。的setAttribute（'內容'，'初始規模= '  +規模+  '最大尺度= '  +規模+  '最小刻度= '  +規模+  '用戶可擴展=無'）;
        如果（docEl。firstElementChild）{
            docEl。firstElementChild。appendChild（metaEl）;
        } else { //並沒有什麼作用
            var wrap =  doc。createElement（' div '）;
            包裹。appendChild（metaEl）;
            doc。寫（渦卷。innerHTML的）;
        }
    }

    //自定義頁面元素的字體大小，方便REM的配置
    function  refreshRem（）{
        var width =  docEl。getBoundingClientRect（）。寬度 ;
        //屏幕信息，屏幕寬度，結合：綁定; RECT：矩形
        if（width / dpr >  640）{
            width =  640  * dpr;
        }
        var rem = width /  10 ;
        docEl。風格。fontSize  = rem +  ' px ' ;
        靈活。rem  =  win。rem  = rem
    }

    / **
     *對於設計稿爲320px的，根元素fontsize = 32px;
     *對於設計稿爲1080px的，根元素fontsize = 108px;
     *設屏幕的寬度爲w（rem * 10），設計稿尺寸爲w，那麼有比例關係w：rem * 10 = x：1;
     * ==> x = w /（rem * 10）;（單位）
     *那麼任意設計稿尺寸L轉化爲相應的尺寸就爲：L / x =（L * rem * 10）/ w;
     *由於rem設置給根元素了，那麼所有的尺寸均可以用rem單位來操作;
     * xrem =（L * rem * 10）/ w * fontsize =（L * 10）/ w;
     *那麼在設計稿中量取L長度的，在編輯器中就爲（L * 10 / w）rem;
     *如此便完成了rem的自動適配
     * / 

    雙贏。addEventListener（' resize '，function（）{
        clearTimeout（tid）;
        tid =  setTimeout（refreshRem，300）;
    }，false）;
    雙贏。addEventListener（' pageshow '，function（e）{
        如果（Ë。堅持）{
            clearTimeout（tid）;
            tid =  setTimeout（refreshRem，300）;
        }
    }，false）;

    //設置頁面的身體的大小，目前發現有何用
    如果（DOC。readyState的 ===  '完整'）{
        doc。身體。風格。fontSize  =  12  * dpr +  ' px ' ;
    } else {
        doc。addEventListener（' DOMContentLoaded '，function（e）{
            doc。身體。風格。fontSize  =  12  * dpr +  ' px ' ;
        }，false）;
    }

    //頁面初始化
    refreshRem（）;

    //提供一些方法
    靈活。dpr  =  win。dpr  = dpr
    靈活。refreshRem  = refreshRem;
    靈活。rem2px  =  function（d）{
        var val =  parseFloat（d）*  this。REM ;
        如果（typeof運算 ð ===  '字串'  &&  ð。匹配（/ REM $ /））{
            val + =  ' px ' ;
        }
        返回 VAL;
    }
    靈活。px2rem  =  function（d）{
        var val =  parseFloat（d）/  this。REM ;
        如果（typeof運算 ð ===  '字串'  &&  ð。匹配（/ PX $ /））{
            val + =  ' rem ' ;
        }
        返回 VAL;
    }

}）（window，window [ ' lib ' ] ||（window [ ' lib ' ] = {}））;