关于不同分辨率对网页缩放的解决办法

1、背景：已经开发好1920分辨率页面，后需要在3840分辨率上使用，用iframe嵌入index.html

2、解决办法；对已经开发好的页面根节点（app）写固定的宽度和高度；

在vue文件中mounted函数中调用我们提前定义好的缩放函数，这里我们需要放大index.html

定义方法如下：

calcRadio(id) {
        //因为是在大屏上执行此函数，这里宽度和高度计算的结果当然为大分辨率的数值
            let width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
            let height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight;
        //此时计算大屏显示我们需要的放大倍数
            let xb = width / 1920;
            let yb = height / 1080;
            let ox = document.getElementById(id);
        //最后用css设置放大样式
            ox.style.transform = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-ms-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-webkit-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-moz-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['-o-transform'] = 'scale(' + xb + ', ' + yb + ')';
            ox.style['transform-origin'] = '0 0';
            ox.style['-ms-transform-origin'] = '0 0';
            ox.style['-webkit-transform-origin'] = '0 0';
            ox.style['-moz-transform-origin'] = '0 0';
            ox.style['-o-transform-origin'] = '0 0';
        },

如果我们需要放大的节点只是普通的根节点，则放大的中心原点可以设置‘0,0’；

如果是其他情况，则需要视具体情况具体分析。

3、除了要在mounted钩子函数中调用，当窗口发生变化时我们也需要调用重新计算放大倍数。

因此我们需要在监听函数中写上：

window.onresize = () => {
          this.calcRadio('app');
        };

4、提问：大家还有什么好的缩放方案么？一起评论下吧，顺便说说缩放对字体的影响，哈哈。。。。。这是个小坑。