防止缩放跨浏览器答案

【问题标题】：Prevent zoom cross-browser防止缩放跨浏览器
【发布时间】：2015-01-22 20:05:35
【问题描述】：

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

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

我试过了：

使用 CSS：zoom: reset; 它适用于 Chrome（请参阅 this page for a working example），但在 Firefox 上根本不起作用。
在各种问题/答案中，我也发现了

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

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

如何防止跨浏览器缩放？

【问题讨论】：

@Skoua：可以覆盖这些快捷方式。我成功地做到了（使用window.onkeydown 和e.preventDefault()）。我的问题是：如何防止从浏览器的菜单中缩放（查看>缩放设置等）
只听 'ctrl' 和 '鼠标滚轮' - 大多数用户在按住 ctrl 并滚动滚轮时放大和缩小。 . 对于那些一直到菜单放大/缩小的人 - 让他们成为:)
如果这是在闪存上，那就是另一回事了。无论如何，我一直在尝试构建一个脚本来检测浏览器的缩放级别，并使用 zoom 对 css 应用相反的效果，但这比我想象的要困难。（使用tombigel.github.io/detect-zoom）
我可以轻松地调整浏览器窗口的大小，或更改分辨率，布局方式与缩放效果相同。那么，您实际上要防止什么？您真的要让您的网站只使用一种分辨率吗？
@David：这是我的网站，你会明白我为什么要避免“标准”浏览器缩放：bigpicture.bi/demo

标签： javascript html css cross-browser

【解决方案1】：

我还没有真正找到“权威”的答案，即浏览器开发人员的明确声明。但是，我发现的所有类似问题的答案（如this one 或that one）都暗示了同样的事情 - 浏览器的缩放功能是为了用户的利益而存在的，而某些浏览器（如 Firefox）根本不允许你，作为网站创建者，请远离他们。

This documentation 可能会解释为什么允许作者禁用缩放在移动设备上可能是个好主意，但在台式机上却不行。

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

至于您列出的解决方案：

zoom 是非标准属性 not supported by Firefox，并且
<meta name="viewport"> 仅关注 layout viewport 和 visual viewport 为not the same thing 的设备，即移动设备。

【讨论】：

您在问题评论中链接的应用程序都是关于缩放的，这使我的回答与您的特定情况不太相关。不过，总的来说，我猜它可能会有所帮助。
检查我的答案如下，只需在 addEventerListener 时添加 {passive: false} window.addEventListener("wheel", handleWheel, {passive: false}); stackoverflow.com/questions/27116221/prevent-zoom-cross-browser/…

【解决方案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。

【讨论】：

Ctrl 和 + 使其缩放
是的，它在 chrome 浏览器中放大，现在再次检查我有更新条件。
从 2020 年起，这在我测试的任何浏览器中都不再有效

【解决方案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>

【讨论】：

【解决方案4】：

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

对于手机：在“

...”标签之间插入。

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

对于跨浏览器的桌面：在 start '

...' 标记之后插入。

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

【讨论】：

【解决方案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 的解决方案时遇到的 detect-zoom 脚本。

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

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

【讨论】：

这可能是最好的方法，涵盖所有场景。 detect-zoom 脚本不适用于新版本的 Chrome 和 Firefox。但如前所述，支持 Safari 和 Opera。
您认为@David 是否可以更新此 HTML 页面gget.it/vtn8i8rb/NFB92BF.HTML，以便尽可能禁用缩放（当然，它不会在每个浏览器上都有效）与您在这里提出的技术？目前在这个页面上只有 CTRL + / CTRL - 被禁用
@Basj，这篇文章中提到的方法依赖于你的设计。这些属性是只读的，所以你能做的最好的就是抵消它们。例如。如果您在223% zoom，并且用户将其更改为150% zoom，那么您将阅读该内容，然后转到1.486% zoom 您的代码。（如果我做对了数学：223/150）。如果用户再次更改，那么您会假装 150% 是 100% 并以此为基础进行数学计算。您给出的页面之类的内容是纯文本，因此不起作用。此外，您不希望阻止缩放该类型的页面。

【解决方案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）。

【讨论】：

我将您的代码粘贴到 jsfiddle.net 中，我仍然可以使用 Command + 在 Mac 上放大
@NestMan，我想你忘了放 });最后。
这可以防止它缩放，很好，但是如果你真的尝试滚动缩放它仍然会在 chrome 上缩放。
在我的 macbook 上，我在触控板上伸出手指（同时在触控板上移动两个手指） - 浏览器调用“mousewheel”事件并且脚本不起作用，因为没有按下 crtlKey （两者都不是 Cmd 键）。

【解决方案7】：

$(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();
               }

      });
  })

【讨论】：

【解决方案8】：

很简单：

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>

【讨论】：

PS：您可以使用 CSS 为 webkit 浏览器做到这一点，如下所示：
Control + Numpad +/- ?

【解决方案9】：

你试过了吗……

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

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

【讨论】：

【解决方案10】：

这将为 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;
});

【讨论】：

目前无法在 MacOS 上的 Chrome 上运行。

【解决方案11】：

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

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});

但我们无法阻止从浏览器菜单中单击以进行缩放。

【讨论】：

请完整阅读问题。这与对鼠标滚轮事件的反应无关。
是的，你是对的。有人说它不再适用于现代鲍泽。几天前我解决了车轮事件的缩放问题。也许它对某人有帮助。我提到这段代码不能阻止浏览器菜单触发的缩放。