办理前端条记本电脑屏幕表现缩放比例125%、150%对页面巨细的影响标题--数据可视化大屏

近期在工作中遇到一个标题，记载一下，在项目上线之后，遇到一个标题，即缩放到90%时，页面字体比默认的100%字体大，一开始毫无头绪，颠末一番的Google...Google...Google....，终于找到相识决方法，这是由于大多数条记本电脑默认的缩放比例为125%大概是150%，以是就出现了在本身台式电脑（默认100%）上开发出来的页面都是按照100%比例来开发的，之后在条记本电脑上打开缩放比例的时间会出现字体巨细表现不公道的标题，这种标题紧张是由于device-pixel-ratio导致的
  原文链接：https://blog.csdn.net/m0_46318298/article/details/133786669

1.新建一个js文件

1. // detectZoom.js
2. export const detectZoom = () => {
3.   let ratio = 0
4.   const screen = window.screen
5.   const ua = navigator.userAgent.toLowerCase()
6.   if (window.devicePixelRatio !== undefined) {
7.     ratio = window.devicePixelRatio
8.   } else if (~ua.indexOf('msie')) {
9.     if (screen.deviceXDPI && screen.logicalXDPI) {
10.       ratio = screen.deviceXDPI / screen.logicalXDPI
11.     }
12.   } else if (
13.     window.outerWidth !== undefined &&
14.     window.innerWidth !== undefined
15.   ) {
16.     ratio = window.outerWidth / window.innerWidth
17.   }
18.   if (ratio) {
19.     ratio = Math.round(ratio * 100)
20.   }
21.   return

复制代码