How can I implement a zoom function like the browser's CTRL +

Question

I want a button that zoom in (increase font size is the main objective but images and tables etc is also wanted)

Answer 1

There is the zoom css3 property which does exactly this, the latest webkit browsers (chrome, safari) support it.

edit: apparently even IE6 supports it in some way, check comments below

setting the zoom css property on your body or container should to the trick. Could be as simple as $('body').css('zoom', '200%'); with jQuery.

Check http://jsfiddle.net/Ks6Yn/1/ for an example

Answer 2

Following code zoomes the page to fit it to 1024px = 100% if available space is smaller. If there is enough space, the page is shown as is.

https://jsfiddle.net/xgqw5bjo/3/

Note, that the version with setting style via jQuery doesn't work as jQuery handles prefixes itself, but in this solution I need to control every one of them.

~function () {
  var $window = $(window), $body = $("body");
  var ie = document.documentMode;
  
  function updateSizes() {
    var width = $window.width(), scale = Math.min(width / 1024, 1);

    var style = $body[0].style;
    
    style.msZoom = ie === 8 || ie === 9 ? scale : 1;
    style.zoom = ie === 10 || ie === 11 ? 1 : scale;
    style.mozTransform = "scale(" + scale + ")";
    style.oTransform = "scale(" + scale + ")";
    style.transform = "scale(" + scale + ")";
  }

  $window.resize(updateSizes);
  updateSizes();
}();

html {
  width: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  transform-origin: top left;
}

@supports (transform: scale(1)) {
  body {
    -ms-zoom: 1 !important;
    zoom: 1 !important;
  }
}

div {
  width: 1024px;
  height: 128px;
  background: url(//i.stack.imgur.com/eMSCb.png) repeat-x;
  background: repeating-linear-gradient(to right, blue, red 256px);
}

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div></div>

Theoretically it should work in the following way:

• IE 5.5 - 7 zoom
• IE 8 - 9 -ms-zoom
• IE 10 - 11 transform & ie

• Edge 12+ transform & @supports

• Opera 11.5 - 12.0 -o-transform

• Opera 12.1 transform

• Firefox 3.5 - 15 -moz-transform

• Firefox 16+ transform

• Firefox 22+ transform (has @supports, but hasn't zoom)

• Safari 4 - 8 zoom

• Safari 9+ transform & @supports (appeared at the same time)

• Chrome 4 - 27 zoom

• Chrome 28 - 35 zoom (has @supports, but hasn't transform yet)
• Chrome 36+ transform & @supports

If I add -webkit-transform, it start work in Safari 3.1 - 3.2, but will brake a lot of others.

Actually for modern browsers result is made by using transform and disgarding zoom. All modern alive browsers (Edge, Firefox, Safari, Chrome) are already having transform & @supports and conform to standards, so the code won't be broken in future.

Tested the code in:

• IE 11
• Edge 15
• Opera 12.18
• Firefox 50
• Safari 5 (Win)
• Safari 10 (Mac)
• Chrome 54, 58

Details about browsers support:

• http://caniuse.com/#feat=css-zoom
• http://caniuse.com/#feat=css-featurequeries (about @supports)
• http://caniuse.com/#feat=transforms2d

---

^{Translation of my answer on ruSO.}

Answer 3

A working concept is to use JavaScript/jQuery to load a overwriting CSS style on click eg. a style with increased sizes of everything to overwrite the base one.

Answer 4

Approach 1

You need to set a variable storing your zoom amount.

When you apply a zoom-in or zoom-out, change this variable accordingly and change the size of each element on your page, both width and height for elements displayed as block, and font size.

Approach 2

Have different stylesheet, load the needed one at the moment the zoom value change.

Approach 3

Change only the class relative to the zoom-level to the elements and have a CSS rule for each class of zoom.

Anyway, what you are trying to do looks wrong to me.