24

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?

I tried body { zoom:80% } but it works only for Chrome.

TylerH
  • 20,799
  • 66
  • 75
  • 101
Mark Timothy
  • 1,784
  • 5
  • 19
  • 30

3 Answers3

42

CSS solution:

body {
    -moz-transform: scale(0.8, 0.8); /* Moz-browsers */
    zoom: 0.8; /* Other non-webkit browsers */
    zoom: 80%; /* Webkit browsers */
}

Supported on all major browsers http://caniuse.com/#feat=css-zoom

For Firefox, fallback is transform-scale http://caniuse.com/#feat=transforms2d

Samuel Liew
  • 76,741
  • 107
  • 159
  • 260
  • @samuel-liew - do you have a resource for why numbers are needed for non-Webkit browsers, while Webkit supports percentages? Why can't just one format be used? – Raelshark Nov 29 '16 at 21:58
5

Here a more flexible solution using CSS transform: scale() and JavaScript / jQuery:

<!-- Trigger -->
<ul id="zoom_triggers">
    <li><a id="zoom_in">zoom in</a></li>
    <li><a id="zoom_out">zoom out</a></li>
    <li><a id="zoom_reset">reset zoom</a></li>
</ul>

<script>
    jQuery(document).ready(function($)
    {
        // Set initial zoom level
        var zoom_level=100;

        // Click events
        $('#zoom_in').click(function() { zoom_page(10, $(this)) });
        $('#zoom_out').click(function() { zoom_page(-10, $(this)) });
        $('#zoom_reset').click(function() { zoom_page(0, $(this)) });

        // Zoom function
        function zoom_page(step, trigger)
        {
            // Zoom just to steps in or out
            if(zoom_level>=120 && step>0 || zoom_level<=80 && step<0) return;

            // Set / reset zoom
            if(step==0) zoom_level=100;
            else zoom_level=zoom_level+step;

            var scale = zoom_level / 100;

            // Set page zoom via CSS
            $('body').css({
                -moz-transform: scale(scale, scale); /* Moz-browsers */
                transform: 'scale('+(scale)+')', // set zoom
                transformOrigin: '50% 0' // set transform scale base
            });

            // Adjust page to zoom width
            if(zoom_level>100) $('body').css({ width: (zoom_level*1.2)+'%' });
            else $('body').css({ width: '100%' });

            // Activate / deaktivate trigger (use CSS to make them look different)
            if(zoom_level>=120 || zoom_level<=80) trigger.addClass('disabled');
            else trigger.parents('ul').find('.disabled').removeClass('disabled');
            if(zoom_level!=100) $('#zoom_reset').removeClass('disabled');
            else $('#zoom_reset').addClass('disabled');
        }
    });
</script>
Laurent H
  • 3
  • 2
Bogdanio
  • 489
  • 7
  • 8
  • 1
    Unfortunately, this doesnt really work, as when you zoom in too much, the page is cut out. And even worse when the zoom controls are placed on the border area, they will disappear and there is no going back, other than reloading the page. – SeGa Jan 11 '19 at 10:41
  • Of course the page is cut off when you zoom it bigger than the viewport as this solution provides a complete zoom, not only a font zoom. – Bogdanio Jan 20 '19 at 14:45
0
  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');


    }
M6R7M
  • 1
  • 3