防止缩放跨浏览器

Question

对于类似地图的工具，我想禁用浏览器缩放功能。 （我知道这通常是个坏主意，但对于某些特定网站来说，这是必需的）。

我通过听键盘快捷键CTRL + / CTRL -并添加e.preventDefault()等成功地做到了。但这并不能阻止从浏览器的缩放菜单更改缩放。

我试过：

• 使用 CSS： zoom: reset; 它适用于 Chrome（请参阅此页面以获取工作示例），但它在 Firefox 上根本不起作用。

• 在各种问题/答案中，我还发现

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

  但这似乎只适用于移动设备。

---

如何防止缩放跨浏览器？

Answer 1

我还没有真正找到一个“权威”的答案，这意味着浏览器开发人员的明确声明。 但是，我发现的类似问题的所有答案（比如这个或那个）都暗示了同样的事情——浏览器的缩放功能是为了用户的利益而存在的，而某些浏览器（比如 Firefox）根本不允许你，因为网站创建者，从他们那里拿走这个选项。

---

该文档可能会阐明为什么允许作者禁用缩放在移动设备上可能是一个好主意，但在台式机上却不是。

简而言之，如果您知道移动设备计算的自动缩放不合适，您可能需要阻止移动设备最初自动缩放您的网站。 在台式机上，没有自动缩放功能，因此当用户访问您的网站时，他们会完全按照预期看到它。 如果他们随后决定需要缩放页面，则没有充分的理由让您阻止他们这样做。

---

至于您列出的解决方案：

• zoom是Firefox 不支持的非标准属性，并且
• <meta name="viewport">只关注布局视口和视觉视口不同的设备，即移动设备。

Answer 2

使用此代码使用Ctrl + +或Ctrl + -或Ctrl +鼠标滚轮向上或Ctrl +鼠标滚轮向下时，您可以禁用浏览器放大功能。

$(document).keydown(function(event) {
if (event.ctrlKey==true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109'  || event.which == '187'  || event.which == '189'  ) ) {
        event.preventDefault();
     }
    // 107 Num Key  +
    // 109 Num Key  -
    // 173 Min Key  hyphen/underscore key
    // 61 Plus key  +/= key
});

$(window).bind('mousewheel DOMMouseScroll', function (event) {
       if (event.ctrlKey == true) {
       event.preventDefault();
       }
});

在此处查看演示： JSFiddle 。

Answer 3

我认为您可以做的是，听浏览器缩放事件（ctrl +“+”），然后检查 window.devicePixelRatio。

然后相应地，对 body 元素应用 HTML5 缩放转换，以相同的比例缩小。 因此，基本上您无法阻止该功能，但您可以应用相同幅度的负面影响。

POC 代码：

 <body style="position: absolute;margin: 0px;">
        <div style="width: 300px; height: 200px; border: 1px solid black;">
            Something is written here
        </div>
        <script>
            var keyIncrease = [17, 61];
            var keyDecrease = [17, 173];
            var keyDefault = [17, 48];
            var listenMultiKeypress = function(keys, callback){
                var keyOn = [];
                for(var i=0; i<keys.length; i++){
                    keyOn[i] = false;
                }
                addEventListener('keydown', function(e){
                    var keyCode = e.which;
                    console.log(keyCode);
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = true;
                    }
                    console.log(keyOn);
                    for(var i=0; i<keyOn.length; i++){
                        if(!keyOn[i]){
                            return;
                        }
                    }
                    setTimeout(callback, 100);
                });
                addEventListener('keyup', function(e){
                    var keyCode = e.which;
                    var idx = keys.indexOf(keyCode);
                    if(idx!=-1){
                        keyOn[idx] = false;
                    }
                    console.log(keyOn);
                });
            };
            var previousScale = 1;
            var previousDevicePixelRatio;
            var neutralizeZoom = function(){
                //alert('caught');
                var scale = 1/window.devicePixelRatio;

                document.body.style.transform = 'scale('+(1/previousScale)+')';
                document.body.style.transform = 'scale('+scale+')';
                var widthDiff = parseInt(getComputedStyle(window.document.body).width)*(scale-1);
                var heightDiff = parseInt(getComputedStyle(window.document.body).height)*(scale-1);
                document.body.style.left = widthDiff/2 + 'px';
                document.body.style.top = heightDiff/2 + 'px';
                previousScale = scale;
            };

            listenMultiKeypress(keyIncrease, neutralizeZoom);
            listenMultiKeypress(keyDecrease, neutralizeZoom);
            listenMultiKeypress(keyDefault, neutralizeZoom);
            neutralizeZoom();
        </script>
    </body>
</html>

Answer 4

在您的 HTML 中插入以下内容：

对于手机：在“<head>...</head>”标签之间插入。

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

对于跨浏览器的桌面：在 start '<body>...' 标记之后插入。

<script>
  document.body.addEventListener("wheel", e=>{
    if(e.ctrlKey)
      e.preventDefault();//prevent zoom
  });
</script>

Answer 5

所以，正如已经提到的，这确实是不可能的。 然而，有一些方法你仍然可以聪明地处理它。

五个主要浏览器中的三个都允许您查看浏览器的缩放级别，此外，如果浏览器被缩放，则会触发window.onresize事件。

IE:      event.view.devicePixelRatio           OR window.view.devicePixelRatio
Chrome:  event.currentTarget.devicePixelRatio  OR window.devicePixelRatio
Firefox: event.originalTarget.devicePixelRatio OR window.devicePixelRatio
Safari:  /* Not possible */
Opera:   /* Not possible */

我认为 OR 之后的东西是基于我在胡闹时注意到的一些东西。 我知道的第一个至少在每个版本的最新版本中工作。 请注意，Safari 和 Opera 都有devicePixelRatio ，但两者都不会改变。 它总是只有1 。

如果您不太在意，以上是您的简单方法。 如果你这样做了，那么你可以试试我在寻找 Safari 和 Opera 的解决方案时遇到的检测缩放脚本。

所以你现在可以做的是获得缩放级别，然后将缩放偏移到它不做任何事情的地方。 因此，如果我强制我的浏览器缩放 50%，您只需转到 200%。 因此，没有变化。 当然它会更复杂一些，你必须存储上一次浏览器缩放，新浏览器缩放，并做一些稍微复杂的数学运算，但根据你已经拥有的，这应该是轻而易举的事。

另一个想法可能是只监听一个调整大小事件，并根据新的可见大小进行计算，但如果窗口只是调整大小，这可能会导致问题。 我认为以上将是您最好的选择，也许还有一个后备alert ，以警告用户在必要时不要缩放。

Answer 6

我更新了代码 Vijay 代码：

$(document).ready(function(){
 var keyCodes = [61, 107, 173, 109, 187, 189];

 $(document).keydown(function(event) {   
   if (event.ctrlKey==true && (keyCodes.indexOf(event.which) != -1)) {
     alert('disabling zooming'); 
     event.preventDefault();
    }
 });

 $(window).bind('mousewheel DOMMouseScroll', function (event) {
    if (event.ctrlKey == true) {
      alert('disabling zooming'); 
      event.preventDefault();
    }
  });
});

该解决方案是针对桌面浏览器的跨平台 (OS/Win)。

Answer 7

你有没有尝试过 ...

$("body").css({
     "-moz-transform":"scale(1)",
     "-webkit-transform":"scale(1)",
     "-o-transform":"scale(1)",
     "-ms-transform":"scale(1)"
});

我已经使用这种类型的代码来设置或重新设置比例。

Answer 8

$(document).ready(function () {
      $(document).keydown(function (event) {
          if (event.ctrlKey == true && (event.which == '107' || event.which == '109' || event.which == '187' || event.which == '189'))
           {
               event.preventDefault();
           }
       });

           $(window).bind('mousewheel DOMMouseScroll', function (event) {
               if (event.ctrlKey == true) {
                   event.preventDefault();
               }

      });
  })

Answer 9

很简单：

 function load(){ document.body.addEventListener("wheel", zoomShortcut); //add the event } function zoomShortcut(e){ if(e.ctrlKey){ //[ctrl] pressed? event.preventDefault(); //prevent zoom if(e.deltaY<0){ //scrolling up? //do something.. return false; } if(e.deltaY>0){ //scrolling down? //do something.. return false; } } }

 p { display: block; background-color: #eeeeee; height: 100px; }

 <!DOCTYPE html> <html> <head> <title>Mousewheel control!</title> </head> <body onload="load()"> <p>If your Mouse is in this Box, you can't zoom.</p> </body> </html>

Answer 10

防止通过键盘缩放浏览器与上述许多答案相同。

window.addEventListener('keydown', function (e) {
    if ((e.ctrlKey || e.metaKey) && (e.which === 61 || e.which === 107 || e.which === 173 || e.which === 109 || e.which === 187 || e.which === 189)) {
        e.preventDefault();
    }
}, false);

但是现在在现代浏览器中防止鼠标滚轮缩放是不同的。 Chrome 的新策略需要您明确使用 passive = false 。

{passive: false}

如果不是，event.preventDefault（）不能通过鼠标滚轮事件停止默认动作浏览器缩放，检查一下。

const handleWheel = function(e) {
    if(e.ctrlKey || e.metaKey)
        e.preventDefault();
};
window.addEventListener("wheel", handleWheel, {passive: false});

但是我们不能阻止从浏览器菜单中点击放大。

Answer 11

以下代码可以防止所有类型的鼠标、键盘手势缩放

document.addEventListener(
    "wheel",
    function touchHandler(e) {
      if (e.ctrlKey) {
        e.preventDefault();
      }
    }, { passive: false } );

对于移动设备，只需添加以下行<meta name='viewport' content='width=device-width,initial-scale=1,user-scalable=no, maximum-scale=1.0, shrink-to-fit=no'>

Answer 12

刚刚在最新的 Chrome 中对此进行了测试，它运行良好。 搏一搏。

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

Answer 13

这会为 chrome 和 safari 禁用它。 我没有在其他浏览器上测试过https://jsfiddle.net/gjqpLfht/

$(document).ready(function() {
    $(document).keydown(function(event) {
        if (event.ctrlKey == true && (event.which == '61' || event.which == '107' || event.which == '173' || event.which == '109' || event.which == '187' || event.which == '189')) {
            alert('disabling zooming');
            event.preventDefault();
            // 107 Num Key  +
            //109 Num Key  -
            //173 Min Key  hyphen/underscor Hey
            // 61 Plus key  +/=
        }
    });

    $(window).bind('mousewheel DOMMouseScroll', function(event) {
        if (event.ctrlKey == true) {
            alert('disabling zooming');
            event.preventDefault();
        }
    });
});


document.addEventListener("gesturestart", function(e) {
    e.preventDefault();
    document.body.style.zoom = 0.99;
});

document.addEventListener("gesturechange", function(e) {
    e.preventDefault();

    document.body.style.zoom = 0.99;
});
document.addEventListener("gestureend", function(e) {
    e.preventDefault();
    document.body.style.zoom = 1;
});