jquery - CSS 变换比例属性

Question

我有一个大问题。我尝试调整页面上所有字体的大小。下面这段代码在 EDGE/CHROME 中工作正常，但在 FF 中不行:/我不知道该代码有什么问题...

$('#zoom_in').click(function() {
    $('body').css({
        '-moz-transform': 'scale(1.5, 1.5)', /* Moz-browsers */
        'zoom': 1.5, /* Other non-webkit browsers */
        'zoom': '150%' /* Webkit browsers */
    });
});

$('#zoom_reset').click(function() {
    $('body').css({
       '-moz-transform': 'scale(1.0, 1.0)', /* Moz-browsers */
        'zoom': 1.0, /* Other non-webkit browsers */
        'zoom': '100%' /* Webkit browsers */
    });
});

提前致谢!

Answer 1

$('#zoom_in').click(function() {
    $('body').css({
      'font-size' : '150%',
        'zoom': 1.5, /* Other non-webkit browsers */
        'zoom': '150%' /* Webkit browsers */
    });
});

$('#zoom_reset').click(function() {
    $('body').css({
       'font-size' : '100%',
        'zoom': 1.0, /* Other non-webkit browsers */
        'zoom': '100%' /* Webkit browsers */
    });
});

body{
  margin:0;
  padding:0;
  text-align:center;
  transition: all 1s ease;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  font-size:100%;
}

button{
padding:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<button id="zoom_in">Zoom In</button>
<button id="zoom_reset">Zoom Reset</button>

<p>
  Some Text
</p>

它在我的 Mozilla 浏览器中运行良好。 请检查此代码。 希望这会有所帮助。