【自适应优化】解决屏幕分辨率不同导致页面布局错乱问题的解决方案

要来一个西瓜吗~~~

已于 2024-12-30 15:18:32 修改

阅读量474

点赞数 2

文章标签：前端

于 2024-10-09 09:34:27 首次发布

本文链接：https://blog.csdn.net/weixin_63904044/article/details/142778112

版权

创建一个DevicePixelRatio.js文件

/**
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
 * **/

class DevicePixelRatio {
    constructor() {
    }
    //获取系统类型
    _getSystem() {
        let flag = false;
        var agent = navigator.userAgent.toLowerCase();
        if (agent.indexOf("windows") >= 0) {
            return true;
        }
    }
    //获取页面缩放比例
    _addHandler(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false);
        } else if (element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    }
    //校正浏览器缩放比例
    _correct() {
        let t = this;
        //页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
        //   document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
        console.log("🚀 ~ DevicePixelRatio ~ _correct ~ document.getElementsByTagName('body')[0].style.zoom:", document.getElementsByTagName('body')[0].style.zoom)
        console.log("🚀 ~ DevicePixelRatio ~ _correct ~ document.getElementsByTagName('body')[0].style.zoom:", document.getElementsByTagName('body'))
        console.log("🚀 ~ DevicePixelRatio ~ _correct ~ devicePixelRatio:", devicePixelRatio)
        document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;

        //   document.getElementsByTagName('body')[0].style.zoom = 2 ;
        // window.devicePixelRatio = 1
    }
    //监听页面缩放
    _watch() {
        let t = this;
        t._addHandler(window, 'resize', function () { //注意这个方法是解决全局有两个window.resize
            //重新校正
            t._correct()
        })
    }
    //初始化页面比例
    init() {
        let t = this;
        if (t._getSystem()) { //判断设备，目前只在windows系统下校正浏览器缩放比例
            //初始化页面校正浏览器缩放比例
            t._correct();
            //开启监听页面缩放
            t._watch();
        }
    }
}
export default DevicePixelRatio;

在需要进行自适应的页面中引用（最好在app.vue中）

import DevicePixelRatio from '@/utils/common/DevicePixelRatio.js';

onMounted(() => {
  new DevicePixelRatio().init();
})

如果只需要当前页面使用

onMounted(() => {
  bodyScale()
})

const bodyScale = () => {
  var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度

  var scale = devicewidth / 1920; // 分母——设计稿的尺寸

  document.body.style.zoom = scale;//放大缩小相应倍数
}