第一时间会想到css的媒体查询,感觉太麻烦了.....瞬间就想放弃,让用户把笔记本分辨率一调,卧槽领导不同意,,,说是虽然工资发不起,但你这活干的也太没法发的起了吧....言归正传
原来就几行代码搞定:
//解决 笔记本屏幕显示缩放比例125%,150%对页面布局的影响 (放在全局/整改系统会被放大100%)
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;
};
const m = detectZoom();
document.body.style.zoom = 100 / Number(m);