How to use the window.devicePixelRatio Property In Javascript
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:
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