GITHUB:https://github.com/peunzhang/pageResponse

我需要用的是他的Contain模式，然而就像他介紹的，有一個缺點：頁面水平垂直居中，左右或上下可能出現空白，頁面背景使用純色或可複製背景可解決此類問題。

他也介紹了，這個框架的原理：使用transform:scale縮放頁面，要求視覺稿高清。

在配置好頁面 後，我們審查需要自適應的DIV發現這個：

style="width: 640px; height: 1742px; transform-origin: center center 0px; transform: scale(0.275545); position: absolute; left: 50%; top: 50%; margin-left: -320px; margin-top: -871px;"
 

    var dw = document.documentElement.clientWidth,
        dh = document.documentElement.clientHeight,
        ds = dw / dh,// 裝置寬高初始比例
        pw = opt.width || 320,
        ph = opt.height || 504,
        ps = pw / ph,// 頁面寬高初始比例
        pd = getElementsByClassName(opt.class),
        sm = opt.mode || "auto",
        fw = dw / pw,// 頁面寬度滿屏比例
        sn = (sm == "contain") ? (ds > ps ? dh / ph : dw / pw) : (sm == "cover") ? (ds < ps ? dh / ph : dw / pw) : dw / pw;// 頁面縮放比例，預設模式為auto
    for(i = 0;i < pd.length;i++){
         template(sm, pd[i], sn);
    }
    //模板
    function template(mode, obj, num){
        var s = obj.style;
        s.width = pw + "px";
        s.height = ph + "px";
        s.webkitTransformOrigin = "left top 0";
        s.transformOrigin = "left top 0";
        s.webkitTransform = "scale(" + num + ")";
        s.transform = "scale(" + num + ")";
        if(mode == "auto"){
            document.body.style.height = ph * num + "px";// 相容android2.3.5系統下body高度不自動重新整理的bug
        }
        else if(mode == "contain" || mode == "cover"){
            s.position = "absolute";
            s.left = "50%";
            s.top = "50%";
            s.marginLeft = pw / -2 + "px";
            s.marginTop = ph / -2 + "px";
            s.webkitTransformOrigin = "center center 0";
            s.transformOrigin = "center center 0";
            document.body.style.msTouchAction = "none";// 阻止預設滑屏事件
            document.ontouchmove = function(e){e.preventDefault()}
        }
    }
 

1.template只接收到一個比例引數

2.呼叫scale的地方，確實只傳了一個引數

所以做一個自己的template

    /*
     * 模板2
     * 因為框架自己的模板(template)的Contain模式會導致左右兩邊有空白，是因為scala的引數沒算好，所以自己算必要的引數
     */
    function template2(mode, obj, xScala, yScala){
        var s = obj.style;
        s.width = pw + "px";
        s.height = ph + "px";
        s.webkitTransformOrigin = "left top 0";
        s.transformOrigin = "left top 0";
        s.webkitTransform = "scale(" + xScala + "," + yScala + ")";
        s.transform = "scale(" + xScala + "," + yScala + ")";
        if(mode == "auto"){
            document.body.style.height = ph * yScala + "px";// 相容android2.3.5系統下body高度不自動重新整理的bug
        }
        else if(mode == "contain" || mode == "cover"){
            s.position = "absolute";
            s.left = "50%";
            s.top = "50%";
            s.marginLeft = pw / -2 + "px";
            s.marginTop = ph / -2 + "px";
            s.webkitTransformOrigin = "center center 0";
            s.transformOrigin = "center center 0";
            document.body.style.msTouchAction = "none";// 阻止預設滑屏事件
            document.ontouchmove = function(e){e.preventDefault()}
        }
    }
    var dw = document.documentElement.clientWidth,
        dh = document.documentElement.clientHeight,
        ds = dw / dh,// 裝置寬高初始比例
        pw = opt.width || 320,
        ph = opt.height || 504,
        ps = pw / ph,// 頁面寬高初始比例
        pd = getElementsByClassName(opt.class),
        sm = opt.mode || "auto",
        fw = dw / pw,// 頁面寬度滿屏比例
        sn = (sm == "contain") ? (ds > ps ? dh / ph : dw / pw) : (sm == "cover") ? (ds < ps ? dh / ph : dw / pw) : dw / pw;// 頁面縮放比例，預設模式為auto
    for(i = 0;i < pd.length;i++){
        switch(opt.template){
            case 1:
                template(sm, pd[i], sn);
                break;
            case 2 :
                template2(sm, pd[i], fw, sn);
                break;
        }
    }
 

            var page = new pageResponse({
                class: 'page',
                mode: 'contain',
                width: '640',
                height: '1742',
                template : 2
            });

 我的pageResponse.js好像不是最新版~然而我是一個JAVA程式設計師，被叫過來改這個頁面的~原始碼還是要基於github上最新的改~