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?

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

Solution 1

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

Solution 2

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>

Comments

[Abijeet Patro]

stackoverflow.com/questions/10278783/what-does-zoom-do-in-cs‌​s ?

[Mark Timothy]

html { -moz-transform: scale(0.8, 0.8); zoom: 0.8; zoom: 80%; } This works in all browsers ...!!!!

[Raelshark]

@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?

[SeGa]

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.

[Bogdanio]

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.