把禁止缩放的方式写下来,移动端一大堆,PC当时还是找了半天的。
· 移动端,这个设置缩放的最大和最小倍数都是1.0就可以了
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
· PC端原则上不可以禁止,因为,这是对于使用者的权利,但是,缩放会导致一些东西乱掉,所以,可以采用覆盖本来操作的方式,使用JavaScript的代码来实现。这个是网上大佬的实现,我菜鸡借用一下,害怕忘了记下来。
<script>
const keyCodeMap = {
61: true,
107: true,
109: true,
173: true,
187: true,
189: true,
};
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) {
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 });
</script>
· 两者同时存在的例子
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=0">
<title>demo</title>
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
<script>
const keyCodeMap = {
61: true,
107: true,
109: true,
173: true,
187: true,
189: true,
};
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) {
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 });
</script>
</html>