javascript - 为什么放大和缩小功能在使用 jquery 的 firefox 中不能正常工作？

Question

我正在放大，我们在单击按钮时使用 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);
    }
});

Answer 1

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

您可以执行以下操作。

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>