Skip to content

Instantly share code, notes, and snippets.

@heytulsiprasad
Forked from abilogos/detect-zoom.js
Last active December 23, 2023 16:59
Show Gist options
  • Save heytulsiprasad/990f58d24ab6755856beb0c8c22c5901 to your computer and use it in GitHub Desktop.
Save heytulsiprasad/990f58d24ab6755856beb0c8c22c5901 to your computer and use it in GitHub Desktop.
Differenciate between resizing for zoom or just window resizing
//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);
@heytulsiprasad
Copy link
Author

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment