对 移动端响应式框架 pageResponse.js 进行扩展，完成自己的需求

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;"

可以看到scale只传了一个参数，这也是导致为什么会有那个缺陷的原因，我们再看关键 源码。

    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;
        }
    }

然后调用的时候，就需要传一个template的序号进来~，重复代码有点多，或许可以优化下的~

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

Tip:

 我的pageResponse.js好像不是最新版~然而我是一个JAVA程序员，被叫过来改这个页面的~源码还是要基于github上最新的改~