技術標籤：大屏html滾輪自適應

Ctrl+滾輪縮放介面等比例放大，並且保持頁面不亂，實現比較簡單獲取當前瀏覽器比例，然後將body的高度、寬度拉伸一下就OK

function ChangeRatio() {
    var ratio = 0;
    var screen = window.screen;
    var ua = navigator.userAgent.toLowerCase();

    if (window.devicePixelRatio !== undefined) {
        ratio = window.devicePixelRatio;
    }
    else if (~ua.indexOf('msie')) {
        if (screen.deviceXDPI && screen.logicalXDPI) {
            ratio = screen.deviceXDPI / screen.logicalXDPI;
        }

    }
    else if (window.outerWidth !== undefined && window.innerWidth !== undefined) {
        ratio = window.outerWidth / window.innerWidth;
    }

    if (ratio) {
        ratio = Math.round(ratio * 100);
    }
    return ratio;

}

//進行比例縮放
function setAppScale(ratio) {
    $("body").width(ratio+"vw");
    $("body").height(ratio+"vh");
    //var ratioX = (300/ratio);
    //var ratioY = (300/ratio);
    var ratioX = 1;
    var ratioY = 1;
    console.log("????",ratioX);
    $("body").css({
        transform: "scale("+ratioX+","+ratioY+")",
        transformOrigin: "left top",
            overflow:"auto"
    });
}



var curRatio = 100;
$().ready(function(){
    curRatio = ChangeRatio();
    console.log(curRatio);
    setAppScale(curRatio);
});

function changeBody(curRatio){
    $("body").width(curRatio+"vw");
    $("body").height(curRatio+"vh");
}

window.onresize = function() {
    curRatio = ChangeRatio();
    console.log(curRatio);
    setAppScale(curRatio);
};