116 lines
2.9 KiB
JavaScript
116 lines
2.9 KiB
JavaScript
// detectZoom.js
|
||
window.onload = function () {
|
||
// fun2();
|
||
// init();
|
||
};
|
||
function fun1() {
|
||
var keyCodeMap = {
|
||
// 91: true, // command
|
||
61: true,
|
||
107: true, // 数字键盘 +
|
||
109: true, // 数字键盘 -
|
||
173: true, // 火狐 - 号
|
||
187: true, // +
|
||
189: true, // -
|
||
};
|
||
// 覆盖ctrl||command + ‘+’/‘-’
|
||
document.onkeydown = function (event) {
|
||
var e = event || window.event;
|
||
var ctrlKey = e.ctrlKey || e.metaKey;
|
||
if (ctrlKey && keyCodeMap[e.keyCode]) {
|
||
e.preventDefault();
|
||
} else if (e.detail) {
|
||
// Firefox
|
||
event.returnValue = false;
|
||
}
|
||
};
|
||
// 覆盖鼠标滑动
|
||
document.body.addEventListener(
|
||
"wheel",
|
||
(e) => {
|
||
if (e.ctrlKey) {
|
||
if (e.deltaY < 0) {
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
if (e.deltaY > 0) {
|
||
e.preventDefault();
|
||
return false;
|
||
}
|
||
}
|
||
},
|
||
{ passive: false }
|
||
);
|
||
}
|
||
function _getSystem() {
|
||
let flag = false;
|
||
var agent = navigator.userAgent.toLowerCase();
|
||
//现只针对windows处理，其它系统暂无该情况，如有，继续在此添加
|
||
if (agent.indexOf("windows") >= 0) {
|
||
return true;
|
||
}
|
||
}
|
||
//获取页面缩放比例
|
||
// _getDevicePixelRatio() {
|
||
// let t = this;
|
||
// }
|
||
//监听方法兼容写法
|
||
function _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;
|
||
}
|
||
}
|
||
//校正浏览器缩放比例
|
||
function _correct() {
|
||
let t = this;
|
||
//页面devicePixelRatio（设备像素比例）变化后，计算页面body标签zoom修改其大小，来抵消devicePixelRatio带来的变化。
|
||
document.getElementsByTagName("body")[0].style.zoom =
|
||
1 / window.devicePixelRatio;
|
||
}
|
||
//监听页面缩放
|
||
function _watch() {
|
||
let t = this;
|
||
t._addHandler(window, "resize", function () {
|
||
//注意这个方法是解决全局有两个window.resize
|
||
//重新校正
|
||
t._correct();
|
||
});
|
||
}
|
||
//初始化页面比例
|
||
function init() {
|
||
let t = this;
|
||
if (t._getSystem()) {
|
||
//判断设备，目前只在windows系统下校正浏览器缩放比例
|
||
//初始化页面校正浏览器缩放比例
|
||
t._correct();
|
||
//开启监听页面缩放
|
||
t._watch();
|
||
}
|
||
}
|
||
function fun2() {
|
||
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);
|
||
}
|
||
|
||
document.body.style.zoom = 100 / Number(ratio);
|
||
}
|