Scribd
Upload
32 views

Window - DevicePixelRatio Property - Web APIs - MDN

The document discusses the window.devicePixelRatio property, which returns the ratio of physical pixels to CSS pixels on the display device. A value of 1 indicates a standard 96 DPI display, while higher values like 2 are for HiDPI/Retina displays. This property is useful for detecting the pixel density of the display and drawing sharper images on high DPI screens. Examples are given for using it to scale canvas drawing and monitoring when the ratio changes, such as by zooming the page.

Uploaded by

Brubaker Brubake
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
32 views

Window - DevicePixelRatio Property - Web APIs - MDN

The document discusses the window.devicePixelRatio property, which returns the ratio of physical pixels to CSS pixels on the display device. A value of 1 indicates a standard 96 DPI display, while higher values like 2 are for HiDPI/Retina displays. This property is useful for detecting the pixel density of the display and drawing sharper images on high DPI screens. Examples are given for using it to scale canvas drawing and monitoring when the ratio changes, such as by zooming the page.

Uploaded by

Brubaker Brubake
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

28/2/24, 11:32 Window: devicePixelRatio property - Web APIs | MDN

Window: devicePixelRatio property


The devicePixelRatio of Window interface returns the ratio of the resolution in physical pixels to the resolution in CSS pixels for the current
display device.
This value could also be interpreted as the ratio of pixel sizes: the size of one CSS pixel to the size of one physical pixel. In simpler terms,
this tells the browser how many of the screen's actual pixels should be used to draw a single CSS pixel.
This is useful when dealing with the difference between rendering on a standard display versus a HiDPI or Retina display, which use more
screen pixels to draw the same objects, resulting in a sharper image.
You can use window.matchMedia() to check if the value of devicePixelRatio changes (which can happen, for example, if the user drags the
window to a display with a different pixel density). See the example below.

Value
A double-precision floating-point value indicating the ratio of the display's resolution in physical pixels to the resolution in CSS pixels. A
value of 1 indicates a classic 96 DPI display, while a value of 2 is expected for HiDPI/Retina displays.
Other values may be returned in the case of unusually low resolution displays or, more often, when a screen has a higher pixel density
than double the standard resolution of 96 DPI. Modern mobile device screens - which offer high display resolutions at small physical sizes
- often yield a devicePixelRatio value greater than 2.

Examples
Correcting resolution in a <canvas>
A <canvas> can appear too blurry on retina screens. Use window.devicePixelRatio to determine how much extra pixel density should be
added to allow for a sharper image.
HTML
HTML

<canvas id="canvas"></canvas>

JavaScript
JS

const canvas = document.getElementById("canvas");


const ctx = canvas.getContext("2d");

// Set display size (css pixels).


const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// Set actual size in memory (scaled to account for extra pixel density).
const scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// Normalize coordinate system to use CSS pixels.


ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes 1/4
28/2/24, 11:32 Window: devicePixelRatio property - Web APIs | MDN
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "I love MDN";


ctx.fillText(textString, x, y);

Monitoring screen resolution or zoom level changes


In this example, we'll set up a media query and watch it to see when the device resolution changes, logging the new resolution.
HTML
HTML Play

<div id="container">
<p>
This example demonstrates the effect of zooming the page in and out
(or moving it to a screen with a different scaling factor) on the
value of the <code>devicePixelRatio</code> property.</p>
<p>Try it and watch what happens!</p>
</p>
</div>
<div id="output"></div>

CSS
CSS Play

body {
font:
22px arial,
sans-serif;
}

#container {

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes 2/4
28/2/24, 11:32 Window: devicePixelRatio property - Web APIs | MDN
border: 2px solid #22d;
margin: 1rem auto;
padding: 1rem;
background-color: #a9f;
}

JavaScript
The string mqString is set to a media query which checks to see if the current display resolution matches a specific number of device dots
per px .
The media variable is a MediaQueryList object that's initialized with the media query string. When the result of running mqString against the
document changes, the media object's change event fires, and the code logs the new resolution.
Note that every time the resolution changes, the example has to create a new media query, based on the new resolution, and a new
MediaQueryList instance.

JS Play

let remove = null;


const output = document.querySelector("#output");

const updatePixelRatio = () => {


if (remove != null) {
remove();
}
const mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
const media = matchMedia(mqString);
media.addEventListener("change", updatePixelRatio);
remove = () => {
media.removeEventListener("change", updatePixelRatio);
};

output.textContent = `devicePixelRatio: ${window.devicePixelRatio}`;


};

updatePixelRatio();

Result
To test the example, try zooming the page in and out, and note the difference in the logged value of devicePixelRatio .
Play

Specifications
https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes 3/4
28/2/24, 11:32 Window: devicePixelRatio property - Web APIs | MDN

Specification
CSSOM View Module
# dom-window-devicepixelratio

Browser compatibility
Report problems with this compatibility data on GitHub

diordnA rof xoferiF


diordnA emorhC

diordnA arepO
emorhC

xoferiF

arepO

irafaS
egdE

Chrome 1 Edge 12 Firefox 18 Opera 11.1 Safari 3 Chrome 18 Firefox 18 Opera 11.1
devicePixelRatio Android for Android
Android
Tip: you can click/tap on a cell for more information.
Full support

See also
Media queries
Using media queries
CSS resolution media query
The image-resolution property

This page was last modified on Dec 13, 2023 by MDN contributors.

https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio#monitoring_screen_resolution_or_zoom_level_changes 4/4

You might also like