How can I implement a zoom function like CTRL + browser

Question

I want a button that zooms in (increasing the font size is the main goal, but images and tables, etc. are also required)

Answer 1

There is a zoom css3 property that does just that, recent web browsers (chrome, safari) support it.

to change . Apparently even IE6 somehow supports it by checking the comments below

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

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

Answer 2

The working concept is to use JavaScript / jQuery to load the CSS rewrite style on click, for example. oversized style to overwrite basic.

Answer 3

Approach 1

You need to set a variable that preserves your scaling value.

When applying scaling or scaling, change this variable accordingly and change the size of each element on your page, both the width and the height for the elements displayed as a block and font size.

Approach 2

Have a different stylesheet, load the required at the time of changing the scaling value.

Approach 3

Only change the class with respect to the zoom level for the elements and apply the CSS rule for each zoom class.

In any case, what you are trying to do does not look right.

Answer 4

The following code zooms the page so that it matches 1024px = 100% if the available space is less. If there is enough space, the page is displayed as is.

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

Please note that the version with the installation style via jQuery does not work, since jQuery processes the prefixes themselves, but in this solution I need to manage each 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 as follows:

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

• Edge 12+ transform and @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 no zoom )

• Safari 4 - 8 zoom

• Safari 9+ transform and @supports (appeared simultaneously)

• Chrome 4 - 27 zoom

• Chrome 28 - 35 zoom (has @supports but not transform yet)
• Chrome 36+ transform and @supports

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

In fact, for modern browsers, the result is obtained using transform and disgarding zoom . All modern live browsers (Edge, Firefox, Safari, Chrome) already have transform and @supports and comply with the standards, so the code will not be broken in the future.

Tested code in:

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

Browser Support Information:

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

---

^{Translation of my response to ruSO.}