如何禁止HTML Canvas缩小及网页用户放大？viewport标签无效

我来帮你搞定这个问题！之前只用<meta name="viewport">没生效确实挺闹心的，因为部分浏览器会忽略这个标签的限制，或者用户可以通过快捷键、触摸操作绕开。咱们分两部分来解决：先搞定网页整体的缩放禁止，再单独限制Canvas的缩放操作。

一、彻底禁止网页的放大/缩小操作 #

除了完善viewport标签，还需要结合JavaScript监听并阻止各类缩放触发事件：

1. 完善viewport元标签
   先把viewport的属性补全，这是基础：

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
   

2. 阻止鼠标滚轮+Ctrl的缩放
   监听全局滚轮事件，当用户按住Ctrl滚动时，阻止默认缩放行为：

   window.addEventListener('wheel', function(e) {
     if (e.ctrlKey) {
       e.preventDefault();
     }
   }, { passive: false });
   

   注意passive: false是必须的，否则部分浏览器不允许阻止默认行为。

3. 阻止双指触摸缩放
   针对移动端的双指缩放，监听触摸事件：

   let touchPoints = 0;
   window.addEventListener('touchstart', function(e) {
     touchPoints = e.touches.length;
   });
   window.addEventListener('touchmove', function(e) {
     if (e.touches.length === 2) { // 双指触摸时阻止缩放
       e.preventDefault();
     }
   }, { passive: false });
   

4. 阻止键盘快捷键缩放
   禁止Ctrl+加号、Ctrl+减号、Ctrl+0这些缩放快捷键：

   window.addEventListener('keydown', function(e) {
     if ((e.ctrlKey || e.metaKey) && (e.key === '+' || e.key === '-' || e.key === '0')) {
       e.preventDefault();
     }
   });
   

二、禁止Canvas的缩小/放大操作 #

如果还要单独限制Canvas本身的缩放（比如防止通过代码或交互修改Canvas尺寸/缩放比例），可以试试这些方法：

1. 锁定Canvas的宽高属性
   用Object.defineProperty禁止修改Canvas的width和height，避免通过代码或控制台调整：

   const canvas = document.getElementById('your-canvas-id');
   // 锁定width
   Object.defineProperty(canvas, 'width', {
     writable: false,
     value: canvas.width // 设为你需要的固定值
   });
   // 锁定height
   Object.defineProperty(canvas, 'height', {
     writable: false,
     value: canvas.height
   });
   

2. 禁止通过CSS transform缩放Canvas
   可以在CSS里直接锁定transform，或者用JS监听属性变化阻止修改：

   #your-canvas-id {
     transform: none !important;
     transform-origin: unset !important;
   }
   

   或者用JS监听：

   const canvas = document.getElementById('your-canvas-id');
   const observer = new MutationObserver(function(mutations) {
     mutations.forEach(function(mutation) {
       if (mutation.attributeName === 'style') {
         if (canvas.style.transform !== 'none') {
           canvas.style.transform = 'none';
         }
       }
     });
   });
   observer.observe(canvas, { attributes: true });
   

3. 阻止Canvas上的滚轮缩放（如果有交互）
   如果你的Canvas绑定了滚轮缩放的逻辑，或者用户可能在Canvas上触发滚轮缩放，单独给Canvas绑定事件阻止：

   const canvas = document.getElementById('your-canvas-id');
   canvas.addEventListener('wheel', function(e) {
     e.preventDefault(); // 阻止Canvas上的任何滚轮操作，包括缩放
   }, { passive: false });
   

注意事项 #

• 部分浏览器（比如Chrome的某些版本）可能会有“强制允许缩放”的设置，这种情况下上述方法可能无法完全生效，但已经能覆盖绝大多数普通用户的操作场景。
• 如果你的网页需要正常滚动，记得不要全局阻止wheel事件，只阻止带Ctrl键的情况，避免影响正常滚动体验。

内容的提问来源于stack exchange，提问作者eeze