"Zoom" a browser window/view with JavaScript?

Question

We can zoom in and out scrolling with pressing ctrl.

But I want to do that using jQuery or JavaScript. Is is possible?

Answer 1

Since you have tagged in jquery also (though written only js in the question title) I would add this answer

You can add the following css to a webpage to zoom a browser window

body {
   -moz-transform: scale(0.8, 0.8);
   zoom: 0.8;
   zoom: 80%;
}

So your jquery becomes

$(document).ready(function(){
  $('body').css('zoom','80%'); /* Webkit browsers */
  $('body').css('zoom','0.8'); /* Other non-webkit browsers */
  $('body').css('-moz-transform',scale(0.8, 0.8)); /* Moz-browsers */
});

Dont worry about any cross-browser since any incomprehensible css property would be avoided by the browser.

Answer 2

Checkout this jsfiddle. Something you may use but it's not exact function like browser zoom-in zoom-out.

$('#zoom-in').click(function() {
   updateZoom(0.1);
});

$('#zoom-out').click(function() {
   updateZoom(-0.1);
});


zoomLevel = 1;

var updateZoom = function(zoom) {
   zoomLevel += zoom;
   $('body').css({ zoom: zoomLevel, '-moz-transform': 'scale(' + zoomLevel + ')' });
}