针对可视化大屏在不同屏幕的缩放

发表于 JS 分类，标签:
25 12月 2022
0

在做可视化大屏时， 大屏的分辨率基本都是固定死的，因此我们只需要把页面按照设计稿尺寸写死即可，但是我们开发屏幕很小，这时候总的将浏览器进行缩小，这里给出一个通用方法，供大家使用，无需缩放浏览器


<script>
    function adjustScreen() {
        cancelAnimationFrame(window.resizeTimer);
        window.resizeTimer = requestAnimationFrame(function () {
            var _innerWidth = window.innerWidth;
            var _innerHeight = window.innerHeight;
            const _ratioWidth = _innerWidth / 3840;
            const _ratioHeight = _innerHeight / 2160;
            const ratio = Math.min(_ratioWidth, _ratioHeight);
            document.querySelector('#app').style = 'transform:scale(' + ratio + ');transform-origin:left top;';
        })
    }
    // 适应屏幕
    adjustScreen();
    window.addEventListener('resize', adjustScreen)
</script>



3840  为大屏的宽。

2160 为大屏的高， 大家按照自己的实际情况写这个值即可。

#app 为我们页面最外围的元素id，  vue单页面默认的id  为 app


0 篇评论

发表我的评论