Browser's zoom-in and zoom-out function calling

Question

Is it possible to trigger a javascript function with Browser's zoom-in and zoom-out?

What is a *"...Browser's zoom-in and zoom-out"* ? [CTRL]+[+/-/0] ? — Roko C. Buljan, Jun 01 '12 at 10:30
If it's the zoom event you want to catch, maybe this can help : http://stackoverflow.com/questions/995914/catch-browsers-zoom-event-in-javascript — Timst, Jun 01 '12 at 10:30
or this http://stackoverflow.com/questions/6163174/detect-page-zoom-change-with-jquery-in-safari — Manse, Jun 01 '12 at 10:32

score 2 · Answer 1 · answered Apr 28 '14 at 11:23

2

Yes friends.... Found the solution....

window.onresize = resize;
function resize() {
   alert("Windows is resized...");
}

I hope this will be helpful for you.

OR

This will help you Get Height Width on zoom-in & zoom-out browser

answered Apr 28 '14 at 11:23

Hardik Patel

67
1
16

This does not work consistantly on mobile, see: http://www.quirksmode.org/dom/events/resize_mobile.html – Sorry-Im-a-N00b Oct 31 '14 at 02:58

manoz · Answer 2 · 2020-11-10T09:51:32.540

1

(window.devicePixelRatio*100).toFixed(0) + '%';

you are not triggered the browser's zoom in/out functions but capture the event. This code helps you to capture the browser's current tab zoom in / zoom out percentage ratio.

run the code : chrome -> console -> create live expression -> paste it & enter.

use chrome zoom in/ out the tab

edited Nov 10 '20 at 09:51

answered Nov 06 '20 at 18:22

manoz

91
4

4

While this code may solve the question, [including an explanation](//meta.stackexchange.com/q/114762) of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please [edit] your answer to add explanations and give an indication of what limitations and assumptions apply. – Suraj Rao Nov 06 '20 at 18:27

score 0 · Answer 3 · answered Mar 31 '23 at 08:39

Try it with Jquery & JS :

<script>
function set_body_size() {
  let w = window.innerWidth;
  let h = window.innerHeight;
  $("body").css({ width: w, height: h });
}

set_body_size();
window.addEventListener("resize", resizeThrottler, false);
var resizeTimeout;

function resizeThrottler() {
  // ignore resize events as long as a deferred execution is in the queue
  if (!resizeTimeout) {
    resizeTimeout = setTimeout(function () {
      resizeTimeout = null;
      set_body_size();
    }, 100);
  }
}
</script>

Browser's zoom-in and zoom-out function calling

3 Answers3