前端解决笔记本屏幕显示缩放比例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);

前端解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响相关推荐

解决笔记本上，显示缩放比例125% 150%对页面布局的影响
win10默认设置150%,对页面布局的影响靠单纯的自适应是没办法解决的问题出在device-pixel-ratio 解决方案一 css解决(复制粘贴放在样式文件中,确保被加载) @media al ...
[css] 当页面采用rem布局时，如何解决用户设置字体大小造成的页面布局错位？
[css] 当页面采用rem布局时,如何解决用户设置字体大小造成的页面布局错位? 禁止用户缩放页面个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主 ...
前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏
提示:前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏前端 vue 解决按1920*1080设计图做的页面适配屏幕缩放并适配4K屏说明一.首先是适配屏幕的缩放比 1. ...
前端解决跨域问题的8种方案（最新最全）
.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/b.js 同一域名下允许 http://www.a.com/lab/a.j ...
前端——解决微信网页清除缓存的方法
前端--解决微信网页清除缓存的方法参考文章: (1)前端--解决微信网页清除缓存的方法 (2)https://www.cnblogs.com/fkcqwq/p/9604184.html 备忘一下.
前端解决跨域问题的8种方案
2019独角兽企业重金招聘Python工程师标准>>> 1.同源策略如下: URL 说明是否允许通信 http://www.a.com/a.js http://www.a.com/ ...
[转] js前端解决跨域问题的8种方案（最新最全）
[转] js前端解决跨域问题的8种方案(最新最全) 参考文章: (1)[转] js前端解决跨域问题的8种方案(最新最全) (2)https://www.cnblogs.com/chris-oil/p/ ...
前端解决：此图片来自微信公众平台未经允许不可引用
前端解决:此图片来自微信公众平台未经允许不可引用方法一: <meta name="referrer" content="no-referrer" /&g ...
笔记本双系统linux显示屏显示错误（笔记本屏幕显示错误 | 外接显示屏显示错误）
电脑屏幕显示错误若安装双系统,windows可以打开,但linux无法打开(仅有一个光标在闪烁,无法进入密码界面),可能是显卡驱动未安装. 进入bios关闭独显直连(各品牌电脑不同,但一般是F2或F ...

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

解决方案一

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

解决方案二

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

app.js

前端解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响相关推荐

最新文章

热门文章

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

解决方案一

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

解决方案二

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

app.js

前端 解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响相关推荐

最新文章

热门文章

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

前端解决笔记本屏幕显示缩放比例125% 150%对页面布局的影响相关推荐