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.

Answer 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