如何解决前端笔记本屏幕显示缩放比例125％,150％对页面布局的影响

发现问题 

win10默认设置150％,对页面布局的影响靠单纯的自适应是没办法解决的

问题出在device-pixel-ratio

解决方案一

css解决(复制粘贴放在样式文件中,确保被加载)

@media all and (-moz-min-device-pixel-ratio: 1.09) and (-moz-max-device-pixel-ratio: 1.18),
 (-webkit-min-device-pixel-ratio: 1.09) and (-webkit-max-device-pixel-ratio: 1.18),
 (min-resolution: 1.09dppx) and (max-resolution: 1.18dppx) {
 :root {
   font-size: 14px;
 }
}
@media all and (-moz-min-device-pixel-ratio: 1.19) and (-moz-max-device-pixel-ratio: 1.28),
 (-webkit-min-device-pixel-ratio: 1.19) and (-webkit-max-device-pixel-ratio: 1.28),
 (min-resolution: 1.19dppx) and (max-resolution: 1.28dppx) {
 :root {
   font-size: 13px;
 }
}
@media all and (-moz-min-device-pixel-ratio: 1.29) and (-moz-max-device-pixel-ratio: 1.4),
 (-webkit-min-device-pixel-ratio: 1.29) and (-webkit-max-device-pixel-ratio: 1.4),
 (min-resolution: 1.29dppx) and (max-resolution: 1.4dppx) {
 :root {
   font-size: 12px;
 }
}
@media all and (-moz-min-device-pixel-ratio: 1.41) and (-moz-max-device-pixel-ratio: 1.6),
 (-webkit-min-device-pixel-ratio: 1.41) and (-webkit-max-device-pixel-ratio: 1.6),
 (min-resolution: 1.41dppx) and (max-resolution: 1.6dppx) {
 :root {
   font-size: 10px;
 }
}
@media all and (-moz-min-device-pixel-ratio: 1.61) and (-moz-max-device-pixel-ratio: 1.8),
 (-webkit-min-device-pixel-ratio: 1.61) and (-webkit-max-device-pixel-ratio: 1.8),
 (min-resolution: 1.61dppx) and (max-resolution: 1.8dppx) {
 :root {
   font-size: 9px;
 }
}
@media all and (-moz-min-device-pixel-ratio: 1.81) and (-moz-max-device-pixel-ratio: 2.1),
 (-webkit-min-device-pixel-ratio: 1.81) and (-webkit-max-device-pixel-ratio: 2.1),
 (min-resolution: 1.81dppx) and (max-resolution: 2.1dppx) {
 :root {
   font-size: 8px;
 }
}

解决方案二 

这种方式会将页面的元素进行缩放

js解决(放在入口文件中)

export const detectZoom = () => {
 let ratio = 0,
   screen = window.screen,
   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;
};

比如React项目中的app.js

app.js

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

补充：什么是媒体查询中的-device-pixel-ratio

想知道什么是媒体查询中的-device-pixel-ratio，要先从CSS像素、设备独立像素、设备像素说起。

概念

CSS像素（CSS Pixel）：适用于web编程，指的是我们在样式代码中使用到的逻辑像素，是一个抽象概念，实际并不存在

设备独立像素（Device Independent Pixel）：与设备无关的逻辑像素，代表可以通过程序控制使用的虚拟像素，是一个总体概念，包括了CSS像素

设备像素（Device Pixel）：物理像素，设备能控制显示的最小单位，我们常说的1920×1080像素分辨率就是用的设备像素单位

关系

因为设备独立像素是包含了CSS像素的大类，所以我们可以直接讨论设备独立像素和设备像素之前的区别和联系。

首先我们可以做一个总体总结：

PC端 —— 1个设备独立像素 = 1个设备像素 （在100％，未缩放的情况下，如果缩放到200％可以说1个设备独立像素 = 2个设备像素）

移动端 —— 根据设备不同有很大的差异，根据 ppi 不同我们可以得到不同的换算关系，标准屏幕（160ppi）下 1个设备独立像素 = 1个设备像素

在详细阐述之前我们先介绍两个概念：每英寸像素点ppi 和 设备像素比dpr

ppi （pixel per inch）：表示每英寸所包含的像素点数目，数值越高，说明屏幕能以更高密度显示图像

计算公式——

ppi在120-160之间的手机被归为低密度手机，160-240被归为中密度，240-320被归为高密度，320以上被归为超高密度（例如苹果公司的Retina显示屏）

dpr（device pixel ratio）：设备像素比，设备像素/设备独立像素，代表设备独立像素到设备像素的转换关系，在JS中可以通过 window.devicePixelRatio 获取

计算公式——

知道设备像素比之后，我们就可以将程序中使用到的CSS像素转换为设备像素，解决同样的图片在不同移动终端上显示存在差异的问题。

常见的设备dpr可以通过 http://screensiz.es/phone 或者 http://devicepixelratio.com/ 查询，我们下面来说一说具体的使用方法。

当设备像素比为1:1时，使用1（1×1）个设备像素显示1个CSS像素；

当设备像素比为2:1时，使用4（2×2）个设备像素显示1个CSS像素；

当设备像素比为3:1时，使用9（3×3）个设备像素显示1个CSS像素。

来源：https://blog.csdn.net/weixin_41718879/article/details/122258017