常州网站设计_计算机开发工具有哪些_电商运营平台_爱站网关键词挖掘机

一、需求：开发都是在缩放100%情况下编码，但是用户的电脑绝大多数是缩放125%，导致页面出现滚动条，字体大小错误，所以需要做适配。

二、解决思路：可以先获取电脑当前缩放值，再用100除以这个值，得到zoom值，再将全局的body.style.zoom赋值

1.创建detectZoom.js文件

// detectZoom.js
export const detectZoom = () => {let ratio = 0const screen = window.screenconst ua = navigator.userAgent.toLowerCase()if (window.devicePixelRatio !== undefined) {ratio = window.devicePixelRatio} else if (~ua.indexOf('msie')) {if (screen.deviceXDPI && screen.logicalXDPI) {ratio = screen.deviceXDPI / screen.logicalXDPI}} else if (window.outerWidth !== undefined &&window.innerWidth !== undefined) {ratio = window.outerWidth / window.innerWidth}if (ratio) {ratio = Math.round(ratio * 100)}return ratio
}

2.在main.js使用这个文件

// 处理笔记本系统默认系统比例为125%或150%带来的布局影响
import { detectZoom } from '@/utils/detectZoom'
const m = detectZoom()
document.body.style.zoom = 100 / Number(m)
console.log(document.body.style.zoom, '当前zoom')

可以看到当前页面显示正常，没有出现滚动条，字体大小也正常