最近在做一个项目，突然发现由于调整电脑的分辨率导致页面变形的问题。正常电脑显示的是100%，当调整电脑缩放至125%时，页面发生变形，由于css设置问题，变形部分的页面设置不可拖拽和显示，严重影响项目功能和体验。在解决问题的过程中，还遇到了由于分辨率不同导致的显示问题。
最后通过百度解决了问题，记录一下放置下次遇到。
电脑缩放问题解决
1.创建文件 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; } //监听页面缩放 _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;
2.在App.vue中导入
import DevicePixelRatio from '@/utils/DevicePixelRatio.js'; setup() { ... onMounted(() => { new DevicePixelRatio().init(); }) }
屏幕分辨率问题解决
1.在App.vue中使用等比例放缩
const bodyScale = () => { var devicewidth = document.documentElement.clientWidth;//获取当前分辨率下的可是区域宽度 var scale = devicewidth / 1920; // 分母——设计稿的尺寸 document.body.style.zoom = scale;//放大缩小相应倍数 } setup() { ... onMounted(() => { bodyScale(); }) }
参考文章：Vue3 解决电脑分辨率及缩放导致页面变形的问题
下班~
