当前位置：首页 > news >正文

HTML 页面禁止缩放功能

news 2025/7/19 7:10:04

页面禁止缩放

代码如下：

<!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, // command61: 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) { // Firefoxevent.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>