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

I want a button that zoom in (in开发者_开发百科crease font size is the main objective but images and tables etc is also wanted)

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

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.}

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.

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.