可视化数据统计大屏的屏幕适配

一.代码详解

获取windowde高度，并根据需求设置默认的尺寸，

var clientH = $(window).height();
$('body').css({
   width: 1920,
    height: 1080,
    overflow:'hidden',
    margin:0
});

计算window 和 body 之间高度的比值，设置缩放的因数；

var bi = clientH / $('body').height();
$('body').css('transform','scale('+bi+')');

非全屏模式下因为 —显示器任务栏的存在—和 —浏览器中地址栏—的存在，我们的body实际上并没有1080，那么此时我们的宽并不能达到1920。

以上这种效果并不是我们想要的，所以为了能看起来正常一点，我们可以给这个body做个水平居中。

var marginLeft = (parseFloat(document.documentElement.clientWidth) - parseFloat($('body').css('width'))*bi)/2;
$('body').css('margin-left',marginLeft+'px');

这样便能达到我们的目的了。

二.完整代码

注意：为了保证窗口高度发生变化的时候，及时使用屏幕，我们需要做个监听来触发该函数。

    resizePage() {
        var clientH = $(window).height();
        $('body').css({
            width: 1920,
            height: 1080,
            overflow:'hidden',
            margin:0
        });
        var bi = clientH/$('body').height();
        $('body').css('transform','scale('+bi+')');
        var marginLeft =(parseFloat(document.documentElement.clientWidth) - parseFloat($('body').css('width'))*bi) / 2;
        $('body').css('margin-left',marginLeft+'px');
    }