出现问题的原因: device-pixel-ratio
解决方式一:
/**
* @author huangjf
* @description 校正windows页面在系统进行缩放后导致页面被放大的问题,通常放大比例是125%、150%
* **/
class DevicePixelRatio {
constructor() {
//this.flag = false;
}
//获取系统类型
_getSystem() {
let flag = false;
var agent = navigator.userAgent.toLowerCase();
// var isMac = /macintosh|mac os x/i.test(navigator.userAgent);
// if(isMac) {
// return false;
// }
//现只针对windows处理,其它系统暂无该情况,如有,继续在此添加
if(agent.indexOf("windows") >= 0) {
return true;
}
}
//获取页面缩放比例
// _getDevicePixelRatio() {
// let t = this;
// }
//监听方法兼容写法
_addHandler(element, type, handler) {
if(element.addEventListener) {
element.addEventListener(type, handler, false);
} else if(element.attachEvent) {
element.attachEvent("on" + type, handler);
} else {
element["on" + type] = handler;
}
}
//校正浏览器缩放比例
_correct() {
let t = this;
//页面devicePixelRatio(设备像素比例)变化后,计算页面body标签zoom修改其大小,来抵消devicePixelRatio带来的变化。
document.getElementsByTagName('body')[0].style.zoom = 1 / window.devicePixelRatio;
}
//监听页面缩放
_watch() {
let t = this;
t._addHandler(window, 'resize', function() { //注意这个方法是解决全局有两个window.resize
//重新校正
t._correct()
})
}
//初始化页面比例
init() {
let t = this;
if(t._getSystem()) { //判断设备,目前只在windows系统下校正浏览器缩放比例
//初始化页面校正浏览器缩放比例
t._correct();
//开启监听页面缩放
t._watch();
}
}
}
export default DevicePixelRatio;
使用:
new DevicePixelRatio().init();
解决方式二:
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;
};
使用:
created() {
const m = detectZoom();
document.body.style.zoom = 110 / Number(m);
},
解决方式三:
@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;
}
}