博客

大屏可视化项目，对于屏幕分辨率自适应适配的一些小技巧

前置条件：大屏设计尺寸：1920*1080

在页面初始化的时候设置函数

// 屏幕自适应

function resizeFun(){

        var w = $(window).width();
        var h = $(window).height();
        var pw = w / 1920; // 根据页面设计，动态修改宽高
        var ph = h / 1080;
        $(“body”).css(“transform”, “scale(” + pw + “,” + ph + “)”);  // 设置等比例缩放

}

// 监听屏幕缩放，自适应
$(window).resize(function () {
       resizeFun();
});

//  初始化调用

$(function () {
    resizeFun();
})