How to detect page zoom level in all modern browsers using JavaScript ?
In this article, we will discuss how the current amount of Zoom can be found on a webpage.
These are the following methods:
Table of Content
- Using outerWidth and innerWidth Properties
- Using clientWidth and clientHeight Properties
Method 1: Using outerWidth and innerWidth Properties
It is easier to detect the zoom level in Webkit browsers like Chrome and Microsoft Edge. This method uses the outerWidth and innerWidth properties, which are the inbuilt functions 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: This example shows the use of the above-explained approach.
HTML
< body > < h1 style = "color: green" > w3wiki </ 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 > |
Output:
Method 2: Using clientWidth and clientHeight Properties
As finding the amount of zoom is not possible in several browsers, the dimensions of the website can be found and the operation can be done using these dimensions of the page. This method uses the clientWidth and clientHeight properties, which are the inbuilt function of JavaScript.
Syntax:
let zoom = body.clientWidth + "px x " + body.clientHeight + "px";
Example: This example shows the use of the above-explained approach.
HTML
< 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" > w3wiki </ 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 > |
Output:
Method 3: Using the window.devicePixelRatio Property
The devicePixelRatio property returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current device.
Syntax:
value = window.devicePixelRatio;
Example: This example shows the use of the above-explained approach.
HTML
< head > < style > /* Set the body to occupy the whole browser window when there is less content */ body { padding: 20px; height: 100vh; margin: 0; } </ style > </ head > < body > < h1 style = "color: green" > w3wiki </ 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 = Math.round(window.devicePixelRatio * 100); out.textContent = zoom; } </ script > </ body > |
Output:
Contact Us