CSS變換比例屬性

Question

我有一個很大的問題。我嘗試調整頁面上的所有字體。下面這段代碼在EDGE /鉻工作正常，但不是在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瀏覽器。 請檢查此代碼。 希望這有助於。