class DevicePixelRatio {
|
constructor() {
|
this.bodyElement = document.getElementsByTagName('body')[0]; // 缓存 body 元素
|
}
|
|
// 判断是否为 Windows 系统
|
isWindowsSystem() {
|
const agent = navigator.userAgent.toLowerCase();
|
return agent.indexOf("windows") >= 0;
|
}
|
|
// 通用事件绑定工具
|
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;
|
}
|
}
|
|
// 校正浏览器缩放比例
|
correctZoom() {
|
if (this.bodyElement) {
|
// 使用 1 / window.devicePixelRatio 来调整 zoom
|
this.bodyElement.style.zoom = 1 / window.devicePixelRatio;
|
}
|
}
|
|
// 监听页面缩放（使用防抖优化）
|
watchResize() {
|
let timer = null;
|
this.addHandler(window, 'resize', () => {
|
if (timer) clearTimeout(timer);
|
timer = setTimeout(() => {
|
this.correctZoom();
|
}, 200); // 延迟 200ms 执行，避免频繁触发
|
});
|
}
|
|
// 初始化页面比例校正
|
init() {
|
if (this.isWindowsSystem()) {
|
// 初始化校正
|
this.correctZoom();
|
// 开启监听
|
this.watchResize();
|
}
|
}
|
}
|
|
export default DevicePixelRatio;
|
