The Window
property devicePixelRatio
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.
There is no way to be notified when this value is changed (which can happen, for example, if the user drags the window to a display with a different pixel density). Since there are no callbacks or events available to detect pixel density changes, the only way to do so is to periodically check the value of devicePixelRatio
to see if it's changed. Just don't do it too often, or you'll impact performance.
Syntax
value = window.devicePixelRatio;
Value
A double-precision floating-point value indicating the ratio of the display's resolution in physical pixels to the resolution in CSS pixels.
Example
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
<canvas id="canvas"></canvas>
JavaScript
var canvas = document.getElementById('canvas'); var ctx = canvas.getContext('2d'); // Set display size (css pixels). var size = 200; canvas.style.width = size + "px"; canvas.style.height = size + "px"; // Set actual size in memory (scaled to account for extra pixel density). var scale = window.devicePixelRatio; // Change to 1 on retina screens to see blurry canvas. canvas.width = size * scale; canvas.height = size * scale; // Normalize coordinate system to use css pixels. ctx.scale(scale, scale); ctx.fillStyle = "#bada55"; ctx.fillRect(10, 10, 300, 300); ctx.fillStyle = "#ffffff"; ctx.font = '18px Arial'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; var x = size / 2; var y = size / 2; var textString = "I love MDN"; ctx.fillText(textString, x, y);
Specifications
Specification | Status | Comment |
---|---|---|
CSS Object Model (CSSOM) View Module The definition of 'Window.devicePixelRatio' in that specification. |
Working Draft | Initial definition |
Browser compatibility
Desktop | Mobile | ||||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Basic support | Chrome Full support Yes | Edge Full support Yes | Firefox Full support 49 | IE Full support 11 | Opera Full support 41 | Safari Full support 9.1 | WebView Android Full support Yes | Chrome Android Full support Yes | Edge Mobile Full support Yes | Firefox Android ? | Opera Android Full support Yes | Safari iOS Full support 9.3 | Samsung Internet Android ? |
Legend
- Full support
- Full support
- Compatibility unknown
- Compatibility unknown
See also
- CSS
resolution
media query - PPK made some research on devicePixelRatio