解决电脑分辨率及缩放导致页面变形的问题

最新推荐文章于 2023-07-04 15:43:35 发布

汤圆(dumpling)

最新推荐文章于 2023-07-04 15:43:35 发布

阅读量960

点赞数 1

分类专栏： vue javasrcipt 文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/m0_47668952/article/details/128905770

版权

vue 同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

javasrcipt

14 篇文章 0 订阅

订阅专栏

该文章介绍了一个类DevicePixelRatio，用于处理Windows系统缩放比例变化时导致的页面变形问题。它通过监听窗口resize事件，校正body标签的zoom属性来适应devicePixelRatio的变化。在Vue3应用中，通过调用这个类的init方法和bodyScale函数，可以在页面加载和缩放时自动调整页面比例，保持页面布局正常。

摘要由CSDN通过智能技术生成

/**
 * @description 校正windows页面在系统进行缩放后导致页面被放大的问题，通常放大比例是125%、150%
 *  // Vue3 解决电脑分辨率及缩放导致页面变形的问题
 * **/

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
  }
  //监听页面缩放
  _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/evicePixelRatio.js';


const bodyScale = () => {
    // Vue3 解决电脑分辨率及缩放导致页面变形的问题
    var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度
    var scale = devicewidth / 1920; // 分母——设计稿的尺寸
    document.body.style.zoom = scale;//放大缩小相应倍数
}

onMounted(() => {
    // Vue3 解决电脑分辨率及缩放导致页面变形的问题
    new DevicePixelRatio().init();
    bodyScale()
})