Catch browser s zoom event in JavaScript

Question

Is it possible to detect  using JavaScript  when the user changes the zoom in a page  I simply want to catch a  zoom  event and respond to it  similar to window onresize event    Thanks

User · Answer

You can also get the text resize events  and the zoom factor by injecting a div containing at least a non-breakable space  possibly  hidden   and regularly checking its height  If the height changes  the text size has changed   and you know how much - this also fires  incidentally  if the window gets zoomed in full-page mode  and you still will get the correct zoom factor  with the same height   height ratio

User · Answer

According to MDN   matchMedia  is the proper way to do this https   developer mozilla org en-US docs Web API Window devicePixelRatio Monitoring screen resolution or zoom level changes  it s a bit finicky because each instance can only watch one MQ at a time  so if you re interested in any zoom level change you need to make a bunch of matchers   but since the browser is in charge to emitting the events it s probably still more performant than polling  and you could throttle or debounce the callback or pin it to an animation frame or something - here s an implementation that seems pretty snappy  feel free to swap in  throttle or whatever if you re already depending on that   Run the code snippet and zoom in and out in your browser  note the updated value in the markup - I only tested this in Firefox  lemme know if you see any issues     x000D   x000D  const el   document querySelector   dppx   x000D   x000D  if   matchMedia  in window    x000D    function observeZoom cb  opts    x000D      opts     x000D           first pass for defaults - range and granularity to capture all the zoom levels in desktop firefox x000D        ceiling  3  x000D        floor  0 3  x000D        granularity  0 05  x000D           opts x000D        x000D      const precision      opts granularity   split      1  length x000D   x000D      let val   opts floor x000D      const vals      x000D      while  val  lt   opts ceiling    x000D        vals push val  x000D        val   parseFloat  val   opts granularity  toFixed precision   x000D        x000D   x000D         construct a number of mediamatchers and assign CB to all of them x000D      const mqls   vals map v   gt  matchMedia   min-resolution    v dppx     x000D   x000D         poor person s throttle x000D      const throttle   3 x000D      let last   performance now   x000D      mqls forEach mql   gt  mql addListener function     x000D        console debug this  arguments  x000D        const now   performance now   x000D        if  now - last  gt  throttle    x000D          cb   x000D          last   now x000D          x000D          x000D      x000D   x000D    observeZoom function     x000D      el innerText   window devicePixelRatio x000D       x000D    else   x000D    el innerText    unable to observe zoom level changes  matchMedia is not supported  x000D    x000D   lt div id  dppx  gt -- lt  div gt  x000D   x000D   x000D

User · Answer

The resize event works on modern browsers by attaching the event on window  and then reading values of thebody  or other element with for example   getBoundingClientRect          In some earlier browsers it was possible to register resize event   handlers on any HTML element  It is still possible to set onresize   attributes or use addEventListener   to set a handler on any element    However  resize events are only fired on the window object  i e    returned by document defaultView   Only handlers registered on the   window object will receive resize events     x000D   x000D  window addEventListener  resize   getSizes  false  x000D           x000D  function getSizes    x000D    let body   document body x000D    console log body clientWidth   px x    body clientHeight    px   x000D    x000D   x000D   x000D    An other alternative  the ResizeObserver API   Depending your layout  you can watch for resizing on a particular element   This works well on   responsive   layouts  because the container box get resized when zooming    x000D   x000D  function watchBoxchange e   x000D      console log e 0  contentBoxSize inlineSize     e 0  contentBoxSize blockSize  x000D   info textContent   e 0  contentBoxSize inlineSize       e 0  contentBoxSize blockSize    px  x000D    x000D   x000D  new ResizeObserver watchBoxchange  observe fluid  x000D   fluid   x000D    width  200px  x000D    height 100px  x000D    overflow  auto  x000D    resize  both  x000D    border  3px black solid  x000D    display  flex  x000D    flex-direction  column  x000D    justify-content  center  x000D    align-items  center  x000D    font-size  8vh x000D    x000D   lt div id  fluid  gt  x000D      lt info id  info  gt  lt  info gt   x000D   lt  div gt  x000D   x000D   x000D      Be careful to not overload javascript tasks from user gestures events  Use requestAnimationFrame whenever you needs redraws

User · Answer

Here is a native way  major frameworks cannot zoom in Chrome  because they dont supports passive event behaviour     For Google Chrome document addEventListener  quot mousewheel quot   event   gt      console log  wheel      if event ctrlKey    true          event preventDefault        if event deltaY  gt  0          console log  Down         else         console log  Up                   passive  false         For Mozilla Firefox document addEventListener  quot DOMMouseScroll quot   event   gt      console log  wheel      if event ctrlKey    true          event preventDefault        if event detail  gt  0          console log  Down         else         console log  Up                   passive  false

User · Answer

Here is a clean solution    x000D   x000D     polyfill window devicePixelRatio for IE x000D  if  window devicePixelRatio   x000D    Object defineProperty window  devicePixelRatio    x000D      enumerable  true  x000D      configurable  true  x000D      get function    x000D        return screen deviceXDPI screen logicalXDPI  x000D        x000D        x000D    x000D  var oldValue window devicePixelRatio  x000D  window addEventListener  resize  function e   x000D    var newValue window devicePixelRatio  x000D    if newValue   oldValue   x000D         TODO polyfill CustomEvent for IE x000D      var event new CustomEvent  devicepixelratiochange    x000D      event oldValue oldValue  x000D      event newValue newValue  x000D      oldValue newValue  x000D      window dispatchEvent event   x000D      x000D      x000D   x000D  window addEventListener  devicepixelratiochange  function e   x000D    console log  devicePixelRatio changed from   e oldValue   to   e newValue   x000D      x000D   x000D   x000D

User · Answer

lt script gt  var zoomv   function       if topRightqs style width   200px     alert   zoom           zoomv     lt  script gt

User · Answer

I am replying to a 3 year old link but I guess here s a more acceptable answer   Create  css file as    media screen and  max-width  1000px               things you want to trigger when the screen is zoomed     EG -   media screen and  max-width  1000px          classname                 font-size 10px            The above code makes the size of the font  10px  when the screen is zoomed to approximately 125   You can check for different zoom level by changing the value of  1000px

User · Answer

This works for me           var deviceXDPI   screen deviceXDPI          setInterval function                if screen deviceXDPI    deviceXDPI                   deviceXDPI   screen deviceXDPI                      there was a resize                              500     It s only needed on IE8    All the other browsers naturally generate a resize event

User · Answer

Although this is a 9 yr old question  the problem persists    I have been detecting resize while excluding zoom in a project  so I edited my code to make it work to detect both resize and zoom exclusive from one another  It works most of the time  so if most is good enough for your project  then this should be helpful  It detects zooming 100  of the time in what I ve tested so far  The only issue is that if the user gets crazy  ie  spastically resizing the window  or the window lags it may fire as a zoom instead of a window resize   It works by detecting a change in window outerWidth or window outerHeight as window resizing while detecting a change in window innerWidth or window innerHeight independent from window resizing as a zoom    x000D   x000D    init object to store window properties x000D  var windowSize     x000D    w  window outerWidth  x000D    h  window outerHeight  x000D    iw  window innerWidth  x000D    ih  window innerHeight x000D     x000D   x000D  window addEventListener  resize   function     x000D      if window resizes x000D    if  window outerWidth     windowSize w    window outerHeight     windowSize h    x000D      windowSize w   window outerWidth     update object with current window properties x000D      windowSize h   window outerHeight  x000D      windowSize iw   window innerWidth  x000D      windowSize ih   window innerHeight  x000D      console log  you re resizing      output x000D      x000D      if the window doesn t resize but the content inside does by   or - 5  x000D    else if  window innerWidth   window innerWidth    05  lt  windowSize iw    x000D      window innerWidth - window innerWidth    05  gt  windowSize iw    x000D      console log  you re zooming   x000D      windowSize iw   window innerWidth  x000D      x000D     false   x000D   x000D   x000D    Note  My solution is like KajMagnus s  but this has worked better for me

User · Answer

There s no way to actively detect if there s a zoom  I found a good entry here on how you can attempt to implement it   I   ve found two ways of detecting the zoom level  One way to detect zoom level changes relies on the fact that percentage values are not zoomed  A percentage value is relative to the viewport width  and thus unaffected by page zoom  If you insert two elements  one with a position in percentages  and one with the same position in pixels  they   ll move apart when the page is zoomed  Find the ratio between the positions of both elements and you   ve got the zoom level  See test case  http   web archive org web 20080723161031 http   novemberborn net javascript page-zoom-ff3  You could also do it using the tools of the above post  The problem is you re more or less making educated guesses on whether or not the page has zoomed  This will work better in some browsers than other  There s no way to tell if the page is zoomed if they load your page while zoomed

User · Answer

There is a nifty plugin built from yonran that can do the detection  Here is his previously answered question on StackOverflow  It works for most of the browsers  Application is as simple as this   window onresize   function onresize       var r   DetectZoom ratios      zoomLevel innerHTML        Zoom level      r zoom        r zoom     r devicePxPerCssPx              device to CSS pixel ratio      r devicePxPerCssPx                    Demo

User · Answer

Lets define px ratio as below  px ratio   ratio of physical pixel to css px  if any one zoom The Page  the viewport pxes  px is different from pixel   reduces and should be fit to The screen so the ratio  physical pixel   CSS px   must get bigger  but in window Resizing  screen size reduces as well as pxes  so the ratio will maintain  zooming  trigger windows resize event -- gt  and change px ratio but resizing  trigger windows resize event -- gt  doesn   t change px ratio   for zoom detection px ratio   window devicePixelRatio    window screen availWidth   document documentElement clientWidth     window  resize function   isZooming        function isZooming        var newPx ratio   window devicePixelRatio    window screen availWidth   document documentElement clientWidth      if newPx ratio    px ratio           px ratio   newPx ratio          console log  quot zooming quot            return true       else          console log  quot just resizing quot            return false           The key point is difference between CSS PX and Physical Pixel  https   gist github com abilogos 66aba96bb0fb27ab3ed4a13245817d1e

User · Answer

Good news everyone some people  Newer browsers will trigger a window resize event when the zoom is changed

User · Answer

I m using this piece of JavaScript to react to Zoom  events   It polls the window width   As somewhat suggested on this page  which Ian Elliott linked to   http   novemberborn net javascript page-zoom-ff3  archive    Tested with Chrome  Firefox 3 6 and Opera  not IE   Regards  Magnus  var zoomListeners         function         Poll the pixel width of the window  invoke zoom listeners      if the width has been changed    var lastWidth   0    function pollZoomFireEvent         var widthNow   jQuery window  width        if  lastWidth    widthNow  return      lastWidth   widthNow         Length changed  user must have zoomed  invoke listeners      for  i   zoomListeners length - 1  i  gt   0  --i          zoomListeners i                 setInterval pollZoomFireEvent  100

User · Answer

On iOS 10 it is possible to add an event listener to the touchmove event and to detect  if the page is zoomed with the current event    x000D   x000D  var prevZoomFactorX  x000D  var prevZoomFactorY  x000D  element addEventListener  touchmove    ev    gt    x000D    let zoomFactorX   document documentElement clientWidth   window innerWidth  x000D    let zoomFactorY   document documentElement clientHeight   window innerHeight  x000D    let pageHasZoom     zoomFactorX     1  amp  amp  zoomFactorY     1   x000D   x000D    if pageHasZoom    x000D         page is zoomed x000D       x000D      if zoomFactorX     prevZoomFactorX    zoomFactorY     prevZoomFactorY    x000D           page is zoomed with this event x000D        x000D      x000D    prevZoomFactorX   zoomFactorX  x000D    prevZoomFactorY   zoomFactorY  x000D      x000D   x000D   x000D

User · Answer

I d like to suggest an improvement to previous solution with tracking changes to window width  Instead of keeping your own array of event listeners you can use existing javascript event system and trigger your own event upon width change  and bind event handlers to it     window  bind  myZoomEvent   function              function pollZoomFireEvent            if       width changed                   window  trigger  myZoomEvent              Throttle debounce can help with reducing the rate of calls of your handler

[javascript] Catch browser's "zoom" event in JavaScript

Examples related to javascript

Examples related to events

Examples related to zooming