系统自适应,Ctrl+滚轮缩放界面等比例放大(页面不乱)

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


};


 

已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: 书香水墨 设计师:CSDN官方博客 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值