注意:
页面缩放一般三种方式
1. ctrl +鼠标滚轮
2. ctrl + 键盘 "+"、"-"
3. 鼠标点击浏览器地址栏右侧 缩放按钮
说明:第3种暂时没办法,前两者可以监听到,所以可以通过以下方式禁用前面2中缩放
index.html页面head标签中设置如下:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" />
App.vue中设置如下:
<script>
export default {
methods: {
// 禁止缩放(浏览器中)
forbidZoom() {
document.addEventListener(
'keydown',
function (event) {
if (
(event.ctrlKey === true || event.metaKey === true) &&
(event.keyCode === 61 ||
event.keyCode === 107 ||
event.keyCode === 173 ||
event.keyCode === 109 ||
event.keyCode === 187 ||
event.keyCode === 189)
) {
event.preventDefault();
}
},
false
);
document.addEventListener(
'mousewheel',
function (e) {
e = e || window.event;
// @ts-ignore
if ((e.wheelDelta && event.ctrlKey) || e.detail) {
event.preventDefault();
}
},
{
capture: false,
passive: false
}
);
},
// 禁止双指放大(手机端)
forbidZoomClick() {
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
},
// 禁止双击屏幕放大(手机端)
forbidZoomDoubleClick() {
var lastTouchEnd = 0;
document.documentElement.addEventListener('touchend', function (event) {
var now = Date.now();
if (now - lastTouchEnd <= 300) {
event.preventDefault();
}
lastTouchEnd = now;
}, false);
}
},
mounted() {
this.forbidZoom(); // dom挂载完成后,及禁止浏览器缩放
this.forbidZoomClick();
this.forbidZoomDoubleClick();
}
}
</script>