Device Pixel Ratio & Density Descriptors Showcase

Your Device Information

Device Pixel Ratio

-

The ratio of physical pixels to CSS pixels

Screen Resolution

-

Physical screen dimensions

Viewport Size

-

CSS pixels available for layout

Density Classification

-

Based on device pixel ratio

Visual Examples

Image Resolution Comparison

1x (Standard)

2x (Retina)

3x (Ultra HD)

CSS Media Query Examples

LDPI (0.75x)

MDPI (1x)

HDPI (1.5x)

XHDPI (2x)

XXHDPI (3x)

XXXHDPI (4x)

Interactive Tests

Pixel Perfect Drawing

More examples can be found, for example, on this site.

Responsive Image Loading

Current source: -

Code Examples

CSS Media Queries for Pixel Density

/* Standard density (1x) */
@media screen and (-webkit-device-pixel-ratio: 1) {
    .icon { background-image: url('icon-1x.png'); }
}

/* High density (2x) - Retina */
@media screen and (-webkit-device-pixel-ratio: 2),
       screen and (min-resolution: 192dpi) {
    .icon { background-image: url('icon-2x.png'); }
}

/* Ultra high density (3x) */
@media screen and (-webkit-device-pixel-ratio: 3),
       screen and (min-resolution: 288dpi) {
    .icon { background-image: url('icon-3x.png'); }
}

JavaScript Device Pixel Ratio Detection

// Get device pixel ratio
const dpr = window.devicePixelRatio || 1;

// Listen for pixel ratio changes
window.matchMedia('(-webkit-device-pixel-ratio: 1)').addListener(handleDPRChange);
window.matchMedia('(-webkit-device-pixel-ratio: 2)').addListener(handleDPRChange);

function handleDPRChange(mql) {
    if (mql.matches) {
        console.log('Device pixel ratio changed');
        updateImages();
    }
}

HTML Responsive Images

<img srcset="image-1x.png 1x,
             image-2x.png 2x,
             image-3x.png 3x"
     src="image-1x.png"
     alt="Responsive image">

<picture>
    <source media="(-webkit-min-device-pixel-ratio: 2)" srcset="hero-2x.jpg">
    <img src="hero-1x.jpg" alt="Hero image">
</picture>