为什么使用 jquery 在 Firefox 中放大和缩小功能无法正常工作？答案

【问题标题】：Why zoom in and zoom out functionality is not working properly in firefox using jquery?为什么使用 jquery 在 Firefox 中放大和缩小功能无法正常工作？
【发布时间】：2020-01-21 23:38:51
【问题描述】：

我正在放大，我们在单击按钮时使用 jquery。

请查看截图：https://nimb.ws/ZSxTbW

在 chrome 中它工作正常，但在 Firefox 中，它不能正常工作并且在设计周围有空白区域。

请查看截图：https://nimb.ws/SeX0sw

请帮我把它缩短。

这是我的代码：

$('#In').on('click', function () {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) {//Firefox  
        var step = 0.02;
        currFFZoom += step;
        $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
        save_zoom_level(currFFZoom);
    } else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
        save_zoom_level(currIEZoom);
    }
});

$('#Out').on('click', function () {
    if (navigator.userAgent.indexOf('Firefox') != -1 && parseFloat(navigator.userAgent.substring(navigator.userAgent.indexOf('Firefox') + 8)) >= 3.6) {//Firefox  
        var step = 0.02;
        currFFZoom -= step;
        $('body').css('MozTransform', 'scale(' + currFFZoom + ')');
        save_zoom_level(currFFZoom);

    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
        save_zoom_level(currIEZoom);
    }
});

【问题讨论】：

标签： javascript jquery html css firefox

【解决方案1】：

我认为你不需要做这么多检查。 transform: scale(1.5) 属性应该适用于所有没有供应商前缀的浏览器。

您可以执行以下操作。

function zoomIn() {
  var element = document.getElementById("content");
  element.classList.add("zoomIn");
}

function zoomOut() {
 var element = document.getElementById("content");
  element.classList.remove('zoomIn').add("zoomOut");
}

.content {
  width: 200px;
  height: 200px;
  background: #eab600;
  margin-top: 50px;
}

.zoomOut {
  transform: scale(0.9);
}

.zoomIn {
  transform: scale(1.5);
}

  <button onclick="zoomIn()">Zoom In</button>
  <button onclick='zoomOut()'>Zoom Out</button>
  
  <div id='content' class='content'></div>

【讨论】：