怎么修改网站排版,深圳宝安区房价多少钱一平方,成都中小企业网站建设公司,电脑网页游戏大全近期在工作中遇到一个问题#xff0c;记录一下#xff0c;在项目上线之后#xff0c;遇到一个问题#xff0c;即缩放到90%时#xff0c;页面字体比默认的100%字体大#xff0c;一开始毫无头绪#xff0c;经过一番的Google...Google...Google....#xff0c;终于找到了解…近期在工作中遇到一个问题记录一下在项目上线之后遇到一个问题即缩放到90%时页面字体比默认的100%字体大一开始毫无头绪经过一番的Google...Google...Google....终于找到了解决方法这是因为大多数笔记本电脑默认的缩放比例为125%或者是150%所以就出现了在本身台式电脑默认100%上开发出来的页面都是按照100%比例来开发的之后在笔记本电脑上打开缩放比例的时候会出现字体大小显示不合理的问题这种问题主要是因为device-pixel-ratio导致的 原文链接https://blog.csdn.net/m0_46318298/article/details/133786669
1.新建一个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引入
import { detectZoom } from /utils/detectZoom;
// 处理笔记本系统默认系统比例为125%或150%带来的布局影响
const m detectZoom();
document.body.style.zoom 100 / Number(m);
题外--数据可视化大屏实现技术方案 vue和react的 vue v-scale-screen组件 dataV组件 react r-scale-screen dataV
