如何解决前端笔记本屏幕显示缩放比例125%,150%对页面布局的影响
作者:superTiger_y 时间:2024-04-29 13:11:36
发现问题
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
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
vue中为何方法要写在methods的里面
![](https://img.aspxhome.com/file/2023/0/126410_0s.jpg)
TIOBE编程语言排行榜前20的语言入门书籍推荐
![](https://img.aspxhome.com/file/2023/0/131860_0s.jpg)
Python实现将目录中TXT合并成一个大TXT文件的方法
asp error对象基础
在Pycharm的Project Files下建立多个项目的操作
![](https://img.aspxhome.com/file/2023/1/135351_0s.png)
pytorch中的自定义数据处理详解
JSP读取文件实例
Python pass 语句使用示例
Python脚本实现自动登录校园网
![](https://img.aspxhome.com/file/2023/9/127779_0s.png)
python浪漫表白源码
![](https://img.aspxhome.com/file/2023/0/67830_0s.jpg)
Intellij idea2020永久破解,亲测可用!!!
![](https://img.aspxhome.com/file/2023/8/107158_0s.jpg)
python实现requests发送/上传多个文件的示例
使用xml http为网站增加域名查询功能
Python3 pyecharts生成Html文件柱状图及折线图代码实例
![](https://img.aspxhome.com/file/2023/1/84031_0s.png)
PyTorch中Tensor的数据统计示例
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
![](https://img.aspxhome.com/file/2023/7/107127_0s.png)
mysql 列转行的技巧(分享)
两个MySql服务的应用
Mysql中正则表达式Regexp常见用法及说明
python求绝对值的三种方法小结
![](https://img.aspxhome.com/file/2023/0/72820_0s.jpg)