为什么放大和缩小功能在使用 jquery 的火狐中无法正常工作?

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)应该适用于所有没有供应商前缀的浏览器。

您可以执行以下操作。

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>