首页 前端知识 关于不同分辨率对网页缩放的解决办法

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

2024-01-29 14:01:10 前端知识 前端哥 721 971 我要收藏

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、提问:大家还有什么好的缩放方案么?一起评论下吧,顺便说说缩放对字体的影响,哈哈。。。。。这是个小坑。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/778.html
标签
评论
会员中心 联系我 留言建议 回顶部
复制成功!