Untitled

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
window.onload = function() {
var currFFZoom = 1;
var currIEZoom = 100;

$('#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 + ')');
    }else if(navigator.userAgent.indexOf('Opera') != -1) {
        var step = 0.02;
        currFFZoom += step;
        $('body').css('-webkit-transform','scale(' + currFFZoom + ')');
    }
    else {
        var step = 2;
        currIEZoom += step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
    console.log(currFFZoom);
});

$('#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 + ')');

    }else if(navigator.userAgent.indexOf('Opera') != -1) {
        var step = 0.02;
        currFFZoom -= step;
        $('body').css('-webkit-transform','scale(' + currFFZoom + ')');
    } else {
        var step = 2;
        currIEZoom -= step;
        $('body').css('zoom', ' ' + currIEZoom + '%');
    }
    console.log(currIEZoom);
});};
</script>
<body>

asjhkdlabfhdsabfalhsdf ph aspfh sapf
<div style=”zoom: 400%”>This is x2 text </div>
<input type="button" id="Out" alt="Zoom Out" value="-" />
<input type="button" id="In" alt="Zoom In" value="+" />
</body>
</html>