imitate browser zoom with JavaScript

Question

How is it possible to zoom out an entire document with JavaScript ?

My goal is to imitate the built-in browser zoom and zoom the entire document to 90%.

I have tried using

document.body.zoom 

This works only with explorer and the page gets messy (a lot of elements are moving around).

Is there a way to do this?

Answer 1

There you go:

Use:

document.body.style.zoom=1.0;this.blur(); 

1.0 means 100%

150% would be 1.5 1000% would be 10.0

this.blur() means that the curser, maybe you selected an input field, looses focus of every select item.

or:

You can use the css3 element zoom (Source)

Firefox does not allow zooming with the browser because you can't access the user properties via javascript or sth.

So you can just use some CSS styles which allow to zoom (CSS3: zoom, as mentioned above) or to increase the text size! Which you could do with including a different CSS file for example. But here you have the "jumpy" problem, because the styled css elements (floated etc.) have to "interact" different in fact of their attributes.

The zoom I posted above works well in Chrome and IE8+ (FF not supported as mentioned)

-- Additional information:

Here is an example on how to zoom exactly with the zoom option. Example application can be found here

The zoom option normally handles the zoom as your browser does!

But this is still all stuff, which is not supported by Firefox, or maybe Safari & Opera? In chrome and IE it works!

Another solution would be: Place your main sizes in "em", and then work around by setting sizes like 100%, 110% (all over the css). So you could have differen CSS files, and "just" need to replace the % attributes!

Yet I don't think there might be other solutions! :(

Answer 2

Here is my solution using CSS transform: scale() and JavaScript / jQuery:

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;            // Set page zoom via CSS          $('body').css({              transform: 'scale(' + (zoom_level / 100) + ')', // 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 src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>    <!-- 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>