How to detect page zoom level in all modern browsers using JavaScript ? - GeeksforGeeks

15 Jul, 2020
In this article, we will discuss how the current amount of zoom can be found on a webpage.
Method 1: Using outerWidth and innerWidth Property: It is easier to detect the zoom level in webkit browsers like Chrome and Microsoft Edge. This method uses the outerWidth and innerWidthproperties, which are the inbuilt function of JavaScript. The outerWidth is first subtracted by 10, to account for the scrollbar and then divided with the innerWidth to get the zoom level.
Note: The amount of zoom may not be exactly the amount of zoom shown by the browser. This can be solved by rounding off the value.
Syntax:
let zoom = (( window.outerWidth - 10 ) / window.innerWidth) * 100;
Example:
HTML
<!DOCTYPE html><html lang="en">  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>      <b>        Zoom in or out of the page to        get the current zoom value    </b>      <p>Current Zoom Level:        <span class="output">        </span>    </p>      <script>        window.addEventListener(            "resize", getSizes, false);          let out = document.querySelector(".output");          function getSizes() {            let zoom = ((window.outerWidth - 10)                / window.innerWidth) * 100;                              out.textContent = zoom;        }    </script></body>  </html>
Output:
Method 2: Using clientWidth and clientHeight Property: As finding the amount of zoom is not possible in several browsers, the dimensions of the website can be found out and the operation can be done using these dimensions of the page. This method uses the clientWidth and clientHeigh properties, which are the inbuilt function of JavaScript.
Syntax:
let zoom = body.clientWidth + "px x " + body.clientHeight + "px";
Example:
HTML
<!DOCTYPE html><html lang="en">  <head>    <style>        /* Set the body to occupy the           whole browser window           when there is less content */        body {            height: 100vh;            margin: 0;        }    </style></head>  <body>    <h1 style="color: green">        GeeksforGeeks    </h1>      <b>        Zoom in or out of the page to        get the current zoom value    </b>      <p>        Current Zoom Level in pixels:        <span class="output">        </span>    </p>      <script>        window.addEventListener(                "resize", getSizes, false);                          let out = document.querySelector(".output");          function getSizes() {            let body = document.body;            let zoom = body.clientWidth + "px x " +                body.clientHeight + "px";            out.textContent = zoom;        }    </script></body>  </html>
Output:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to set space between the flexbox ?
Design a web page using HTML and CSS
Form validation using jQuery
How to style a checkbox using CSS?
Search Bar using HTML, CSS and JavaScript
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
HTML Cheat Sheet - A Basic Guide to HTML