页面禁止缩放
代码如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, maximum-scale=1.0, user-scalable=no;">
<meta name="theme-color" content="#000000">
<title>页面禁止缩放功能</title>
</head>
<!-- 禁止鼠标右键 oncontextmenu="return false"-->
<body oncontextmenu="return false">
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<script>
const keyCodeMap = {
// 91: true, // command
61: true,
107: true, // 数字键盘 +
109: true, // 数字键盘 -
173: true, // 火狐 - 号
187: true, // +
189: true, // -
};
// 覆盖ctrl||command + ‘+’/‘-’
document.onkeydown = function (event) {
const e = event || window.event;
const 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 });
// 触摸屏禁止手动缩放页面
document.documentElement.addEventListener('touchstart', (event) => {
if(event.touches.length > 1) {
event.preventDefault();
}
},{
passive: false
})
</script>
</body>
</html>