Question

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

我通过听键盘快捷键 CTRL + / CTRL - 并添加{{1等等 但这并不妨碍从浏览器的缩放菜单更改缩放。

我试过了：

使用CSS：e.preventDefault()适用于Chrome（请参阅this page for a working example），但在Firefox上根本不起作用。
在各种问题/答案中，我也找到了

zoom: reset;

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

如何防止缩放跨浏览器？

Answer 1

您可以通过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/underscor Hey
    // 61 Plus key  +/= key
});

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

在这里查看演示http://jsfiddle.net/VijayDhanvai/4m3z3knd/

Answer 2

我还没有找到一个权威的＆＃34;回答，这意味着浏览器开发人员的明确声明。但是，我发现的类似问题的所有答案（如this one或that one）都表明了同样的事情 - 浏览器的缩放功能是为了用户和某些浏览器的利益而存在的（像Firefox一样）根本不允许你作为网站创建者，让他们远离他们。

This documentation可能会阐明为什么允许作者禁用缩放可能是移动设备上的一个好主意，而不是桌面上的。

简而言之，您可能需要阻止移动设备最初自动缩放您的网站，如果您知道他们计算的自动缩放将不合适。 在桌面设备上，没有自动缩放功能，因此当用户访问您的网站时，他们会看到它与预期完全一样。如果他们决定需要缩放页面，那么＆＃ 39;没有理由让你阻止他们这样做。

至于您列出的解决方案：

zoom是非标准媒体资源not supported by Firefox和
<meta name="viewport">仅关注布局视口和视觉视口为not the same thing的设备，即移动设备。

Answer 3

我认为您可以做的是，听取浏览器缩放事件（ctrl +＆＃34; +＆＃34;）然后检查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

因此，正如已经提到的那样，这是不可能的。但是，有一些方法你仍然可以很聪明。

五种主要浏览器中的三种都允许您查看浏览器的缩放级别，此外，如果浏览器被缩放，则会触发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。

如果您不太关心，那么上述内容就是您的最佳选择。如果你这样做，那么你可以尝试detect-zoom脚本，这是我在寻找Safari和Opera的解决方案时遇到的。

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

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

Answer 5

我更新了代码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 6

很简单：

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 7

将以下内容插入HTML：

对于移动设备：在' ... '标签之间插入。

InteractiveSimpleChart

对于跨浏览器：在开始标记“ ...”之后插入。

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

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

你试过......

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

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

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

防止缩放跨浏览器

10 个答案: