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);
|
|||
|
|
}
|