屏幕宽度x手机屏幕分辨率
在用css把canvas的样式scale的分辨率缩小就好

function drawImage(opts) {

        if(!opts.canvas) {
            throw("A canvas is required");
        }

        // 获取canvas
        var canvas = opts.canvas,
            context = canvas.getContext('2d'),
            //image = opts.image,

        // 默认参数
            srcx = opts.srcx || 0,
            srcy = opts.srcy || 0,
            srcw = opts.srcw || image.naturalWidth,
            srch = opts.srch || image.naturalHeight,
            desx = opts.desx || srcx,
            desy = opts.desy || srcy,
            desw = opts.desw || srcw,
            desh = opts.desh || srch,
            auto = opts.auto,

        // 获取设备分辨率
            devicePixelRatio = window.devicePixelRatio || 1,
            backingStoreRatio = context.webkitBackingStorePixelRatio ||
                                context.mozBackingStorePixelRatio ||
                                context.msBackingStorePixelRatio ||
                                context.oBackingStorePixelRatio ||
                                context.backingStorePixelRatio || 1,

            ratio = devicePixelRatio / backingStoreRatio;

        // 判断canvas是否按照分辨率缩放
        if (typeof auto === 'undefined') {
            auto = true;
        }
        // upscale the canvas if the two ratios don't match
        if (auto && devicePixelRatio !== backingStoreRatio) {

            var oldWidth = canvas.width;
            var oldHeight = canvas.height;

            canvas.width = oldWidth * ratio;
            canvas.height = oldHeight * ratio;

            canvas.style.width = oldWidth + 'px';
            canvas.style.height = oldHeight + 'px';

            // now scale the context to counter
            // the fact that we've manually scaled
            // our canvas element
            context.scale(ratio, ratio);

        }

        context.drawImage(pic, srcx, srcy, srcw, srch, desx, desy, desw, desh);
    }

建议使用这个rasterizeHTML.js，很不错！

研究了2天，看了网上的各种回答与参考，终于解决了。下面的我的解决方案：
`

    var dom=$(".content-container .show-content"); //你要转变的dom
    var width = dom.width();
    var height = dom.height();
    var type = "png";
    var scaleBy = 3;  //缩放比例
    var canvas = document.createElement('canvas');
    canvas.width = width * scaleBy;
    canvas.height = height * scaleBy+35;  //35是我处理完后发现短了一点，具体为什么不清楚,如果你也少的话，根据自己的项目调吧
    canvas.style.width = width * scaleBy + 'px';
    canvas.style.height = height * scaleBy + 'px';
    var context = canvas.getContext('2d');
    context.scale(scaleBy, scaleBy);
    html2canvas(dom[0], {
        canvas:canvas,
        onrendered: function (canvas) {
            dom.css("display","none");//处理完后将dom隐藏,如果一开始就隐藏的话,canvas出不来,不知道大家是不是这样
            $(".img-container").append(Canvas2Image.convertToImage(canvas,width* scaleBy,height* scaleBy,type));//这是放大了很3倍的图片
            $(".img-container img").css("width",width+"px").css("height",height+"px");//在将放大的图片用css缩小,在手机上就非常清晰了
            
        }
    });`
    
    1.解决的时候有几个坑,要转变的那段html如果有margin他可能不会出现在canvas的初始位置,这就很悲剧了，由于我的需求是不显示html，而是显示转换后的图片.所以我直接把他放在没有margin的地方.