Differenciate between resizing for zoom or just window resizing

detect-zoom.js

//for zoom detection
px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

function isZooming(){
    var newPx_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;
    if(newPx_ratio != px_ratio){
        px_ratio = newPx_ratio;
        console.log("zooming");
        return true;
    }else{
        console.log("just resizing");
        return false;
    }
}

window.addEventListener("resize", isZooming);

This code is attempting to detect whether the user is zooming in or out in the browser. It relies on the window.devicePixelRatio property and the comparison of the current pixel ratio with the initial pixel ratio stored in the px_ratio variable. Additionally, it uses the resize event to trigger the detection when the window is resized.

Here's a detailed explanation of the code:

1. Initial Pixel Ratio Calculation:

   px_ratio = window.devicePixelRatio || window.screen.availWidth / document.documentElement.clientWidth;

   • This line calculates the initial pixel ratio (px_ratio) of the device. It first checks if the window.devicePixelRatio property is available. If not, it calculates the pixel ratio using the screen width (window.screen.availWidth) divided by the document's client width (document.documentElement.clientWidth).

2. Zoom Detection 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("zooming");
       return true;
     } else {
       console.log("just resizing");
       return false;
     }
   }

   • This function is called when the resize event occurs.
   • It calculates the current pixel ratio (newPx_ratio) using the same method as the initialization.
   • It compares the current pixel ratio with the initial pixel ratio (px_ratio).
   • If the pixel ratios are different, it means the user is zooming, and it logs "zooming" to the console, updates px_ratio with the new value, and returns true.
   • If the pixel ratios are the same, it logs "just resizing" to the console and returns false.

3. Event Listener for Resize:

   window.addEventListener("resize", isZooming);

   • This line adds an event listener to the resize event on the window.
   • When the user resizes the window (including zooming), the isZooming function is called.

In summary, the code attempts to determine whether the user is zooming by comparing the pixel ratio before and after a resize event. If the pixel ratios are different, it assumes the user is zooming. Keep in mind that the accuracy of this approach may vary across browsers and scenarios, and it might not cover all edge cases.