解决前端笔记本电脑屏幕显示缩放比例125%、150%对页面大小的影响问题
近期在工作中遇到一个问题,记录一下,在项目上线之后,遇到一个问题,即缩放到90%时,页面字体比默认的100%字体大,一开始毫无头绪,经过一番的Google...Google...Google....,终于找到了解决方法,这是因为大多数笔记本电脑默认的缩放比例为125%或者是150%,所以就出现了在本身台式电脑(默认100%)上开发出来的页面都是按照100%比例来开发的,之后在笔记本电脑上打开缩放比例的时候会出现字体大小显示不合理的问题,这种问题主要是因为device-pixel-ratio导致的。
解决办法:
(图片来源网络,侵删)
1)新建一个js文件
// detectZoom.js export const detectZoom = () => { let ratio = 0 const screen = window.screen const 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中引入
import { detectZoom } from '@/utils/detectZoom'; // 处理笔记本系统默认系统比例为125%或150%带来的布局影响 const m = detectZoom(); document.body.style.zoom = 100 / Number(m);
(图片来源网络,侵删)
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
还没有评论,来说两句吧...