Device Pixel Ratio (DPR) Checker

What Is Device Pixel Ratio?

Device Pixel Ratio (DPR), also called CSS pixel ratio, is the ratio between the number of physical hardware pixels on your display and the number of CSS logical pixels the browser uses to lay out content. A DPR of 1 means one CSS pixel equals exactly one physical pixel. A DPR of 2 (commonly called Retina) means each CSS pixel is rendered using a 2×2 grid of physical pixels — four times the pixel density.

Your DPR Visualized

The grid below shows how your browser renders a single CSS pixel. Each square represents one physical pixel. A higher DPR means more physical pixels are used to render the same logical area, resulting in sharper text and smoother curves.

DPR vs. OS Scaling

It is important to understand that DPR is not the same as OS scaling. OS scaling changes the size of UI elements by adjusting the logical resolution. DPR, on the other hand, is a hardware property that determines how many physical pixels are used to render each CSS pixel. When you set 150% scaling in Windows on a 4K monitor, the OS tells the browser to use a DPR of 1.5 meaning every CSS pixel is rendered as a 1.5×1.5 block of physical pixels. The browser detects this automatically via window.devicePixelRatio.

CSS Pixels vs. Physical Pixels

Web pages are designed in CSS pixels, not physical pixels. This abstraction ensures that a 300px-wide element takes up roughly the same physical size across displays with vastly different pixel densities. The browser automatically multiplies all dimensions by the DPR when rendering to the screen. This is why a 1920×1080 CSS viewport on a 4K monitor at 200% scaling actually occupies 3840×2160 physical pixels — delivering Retina-quality sharpness.

How DPR Affects Web Development

Knowing the DPR of your target devices is critical for:

• Image assets: Serve @2x or @3x images to high-DPR displays to avoid blurry raster graphics. Use srcset with density descriptors (e.g., 1x, 2x, 3x) so the browser picks the right image for the device DPR.
• Canvas rendering: When drawing on an HTML canvas, multiply canvas.width by window.devicePixelRatio so your drawings appear crisp on Retina displays.
• Media queries: Use the resolution media feature (min-resolution: 2dppx) to deliver high-DPR-specific CSS.
• Performance: High-DPR displays require more GPU memory and rendering work. On battery-powered devices, rendering at DPR 3 can increase power consumption noticeably.

Common Device DPR Values

The table below shows the typical device pixel ratios for popular devices and display types. These values can vary between models and OS scaling settings.

DPR and Your Effective Resolution

Your effective resolution is the actual number of physical pixels the browser uses to render the page. It is calculated by multiplying your CSS viewport dimensions by your DPR. For web developers, this is the resolution to design for when creating high-DPI assets. For example:

• Viewport 1920×1080 at DPR 1.0 → Effective: 1920×1080
• Viewport 1920×1080 at DPR 1.5 → Effective: 2880×1620
• Viewport 1920×1080 at DPR 2.0 → Effective: 3840×2160
• Viewport 1920×1080 at DPR 3.0 → Effective: 5760×3240

Frequently Asked Questions

What is device pixel ratio (DPR)?

DPR is the ratio of physical hardware pixels to CSS logical pixels on your display. It was introduced by Apple with the Retina display and has since become a standard property reported by all modern browsers via window.devicePixelRatio. A DPR of 2 means four physical pixels render every CSS pixel, producing noticeably sharper text and images.

What does DPR 2 or DPR 3 mean?

DPR 2 means each CSS pixel is rendered with 4 physical pixels arranged in a 2×2 grid. This gives four times the pixel density of a standard 1x display. DPR 3 uses 9 physical pixels in a 3×3 grid — nine times the density. The higher the DPR, the smoother curves appear and the sharper text renders, though there are diminishing returns beyond DPR 3 for the human eye at normal viewing distances.

How do I find my monitor's DPR?

This tool detects it instantly and displays it in the Device Pixel Ratio card above. You can also check your OS display settings: on Windows, go to Settings → Display → Scale and layout — the scaling percentage (e.g., 150%) divided by 100 gives your DPR. On macOS, go to System Settings → Displays — the "Default" setting corresponds to DPR 2 on Retina MacBooks. On Linux with GNOME, check Settings → Displays → Scale.

What DPR do most devices have?

Most modern phones have DPR 2–3 (flagship iPhones and Android devices are DPR 3). Standard desktop monitors (1080p or 1440p at 100% scaling) have DPR 1. Retina MacBooks have DPR 2. High-end 4K monitors typically run at 150–200% scaling, giving a DPR of 1.5 to 2. Ultra-high-end phones and tablets may reach DPR 3.5 or higher.

How does DPR affect image quality?

On a DPR 2 display, a 200×200 px CSS image needs a 400×400 px physical image (2×) to appear sharp. If you serve a 200×200 px image, the browser stretches it to 400 physical pixels, causing visible blur. Always use srcset with 2x and 3x density descriptors to provide appropriately sized images for high-DPR displays. Vector formats like SVG are resolution-independent and always render at full sharpness regardless of DPR.

Can two displays have the same resolution but different DPR?

Yes. A 27-inch 4K monitor at 100% scaling has a CSS viewport of 3840×2160 and DPR 1. A 27-inch 4K monitor at 200% scaling has a CSS viewport of 1920×1080 and DPR 2. Both have the same 3840×2160 physical panel, but the second display appears identical in physical size and sharpness to a 1080p monitor — only with far crisper rendering because four physical pixels are used for each CSS pixel.

Sources and References