How do I zoom out a whole website using jQuery or CSS?

Question

I would like to make my website like 80% smaller. i.e. zoom out images, fonts, everything to 80% of its current size. Is there any way to do this using jQuery or CSS?

<

Answer 1

  var zoom_level=100;

    // Click events
    $('#btn_zoom_in').click(function() { zoom_page(10, $(this)) });
    $('#btn_zoom_out').click(function() { zoom_page(-10, $(this)) });
    $('#btn_zoom_reset').click(function() { zoom_page(0, $(this)) });


    function zoom_page(step, trigger)
    {


        if( $('#form_width').val()<1){

            alert('Please Choose your Template and Design Width');

            $('#change_product').focus();

            return false;

        }

        var max_zoom = 180;
        var min_zoom = 10;

        if(zoom_level>=max_zoom && step>0 || zoom_level<=min_zoom && step<0) return;

        if(step==0) zoom_level=100;
        else zoom_level=zoom_level+step;

        var scale = zoom_level / 100;

        var selector = '.panel-body';

        $(selector).css({"transform":"scale("+scale+")","transformOrigin":"left top"});

        zoom_level==max_zoom  ? $('#btn_zoom_in').addClass('disabled') : $('#btn_zoom_in').removeClass('disabled');

        zoom_level==min_zoom  ?  $('#btn_zoom_out').addClass('disabled') :  $('#btn_zoom_out').removeClass('disabled');

        if( zoom_level==100 ) $('#btn_zoom_reset').addClass('disabled');

        if( zoom_level!=100 ) $('#btn_zoom_reset').removeClass('disabled');


    }