系统自适应，Ctrl+滚轮缩放界面等比例放大（页面不乱）

最新推荐文章于 2024-08-25 12:32:59 发布

牟云飞

最新推荐文章于 2024-08-25 12:32:59 发布

阅读量3.6k

点赞数 1

分类专栏：大屏文章标签： html滚轮自适应

本文为博主牟云飞原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/myfmyfmyfmyf/article/details/112881098

版权

大屏专栏收录该内容

7 篇文章

订阅专栏

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({
        minWidth:1366,
        minHeight:768,
        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);
};

上种方式在某些框架里不显示滚动条，可以通过内套一个div搞定

1、设置body样式style="width: 100%;height:100%;"

2、body内套一层最大的div（changeScaleDiv），用来放大超出范围显示滚动条，同样标签样式style="width: 100%;height:100%;"

3、body通过px的方式指定大小，否则不出滚动条

4、body内最大的div（changeScaleDiv）也通过px的方式指定大小，并且指定最小宽度minWidth、最小高度minHeight

5、监听onresize事件，每次变动修改changeScaleDiv的宽度和高度

/**
 * Created by muyunfei on 2021/1/20.
 */
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("100%");
    $("body").height("100%");
    $("body").width($("body").width());
    $("body").height($("body").height());
    $("body").css({
        overflow:'auto'
    })
    $("#changeScaleDiv").width(ratio+"%");
    $("#changeScaleDiv").height(ratio+"%");
    $("#changeScaleDiv").width($("#changeScaleDiv").width());
    $("#changeScaleDiv").height($("#changeScaleDiv").height());
    //var ratioX = (300/ratio);
    //var ratioY = (300/ratio);
    var ratioX = 1;
    var ratioY = 1;



    console.log("$(\"body\")",$("body"))
    $("body").css({

        transform: "scale("+ratioX+","+ratioY+")",
        transformOrigin: "left top",
        overflow:"auto"
    });

}



var curRatio = 100;
var initRatio = 100;
$().ready(function(){
    initRatio = ChangeRatio();
    init();
});

function init(){
    //1、设置body样式style="width: 100%;height:100%;"
    //2、body内套一层最大的div（changeScaleDiv），用来放大超出范围显示滚动条，同样标签样式style="width: 100%;height:100%;"
    //3、body通过px的方式指定大小，否则不出滚动条
    //4、body内最大的div（changeScaleDiv）也通过px的方式指定大小，并且指定最小宽度、最小高度
    //5、监听onresize事件，每次变动修改changeScaleDiv的宽度和高度
    $("body").width($("body").width());
    $("body").height($("body").height());
    $("body").css({
        overflow:'auto'
    })
    $("#changeScaleDiv").width($("body").width());
    $("#changeScaleDiv").height($("body").height());
    $("#changeScaleDiv").css({
        minWidth:1600,
        minHeight:768
    })
}


window.onresize = function() {

    curRatio = ChangeRatio();
    if(curRatio == initRatio){
        //恢复初始样子
        $("body").width("100%");
        $("body").height("100%");
        init();
    }else{
        setAppScale(curRatio);
    }


};