Device Pixel Ratio Explained: What DPR Means for You
My Screen Resolution · March 9, 2026
What Is Device Pixel Ratio?
Device pixel ratio — DPR — is the number of physical hardware pixels the screen uses to draw a single CSS pixel. A DPR of 2 means every CSS pixel you see on a webpage is actually rendered using a 2 x 2 grid of four physical pixels. A DPR of 3 means a 3 x 3 grid of nine physical pixels per CSS pixel.
Put simply, DPR answers this question: how many real screen pixels does the device pack behind each "logical" pixel that websites and apps work with?
A standard desktop monitor with a DPR of 1 has a one-to-one mapping. What the browser calls one pixel is exactly one pixel on the hardware. A modern smartphone with a DPR of 3 uses nine physical pixels for that same one logical pixel — which is why text and images look so much sharper on your phone than on many desktop screens.
You can check your own device pixel ratio right now. Visit MyScreenResolution.com and it will display your DPR alongside your screen resolution and viewport size instantly.
DPR Values Explained: 1x, 2x, and 3x
Not all screens are created equal, and DPR values cluster around a few common tiers.
DPR 1x (Standard Density)
One physical pixel equals one CSS pixel. This is the baseline. Most older desktop monitors and budget laptops sit at DPR 1. Text and images render at their exact intended size, but individual pixels can be visible on larger screens or at close viewing distances.
DPR 1.5x (Mid-Range)
Some Android devices and Windows laptops with display scaling land at DPR 1.5. The screen uses 1.5 physical pixels per CSS pixel in each direction, meaning roughly 2.25 hardware pixels per logical pixel. This is a middle ground that improves sharpness without demanding the image assets of a full 2x display.
DPR 2x (HiDPI / Retina)
Two physical pixels per CSS pixel in each direction, so four hardware pixels per logical pixel. This is the tier Apple branded as "Retina" when it launched the iPhone 4 in 2010. Today, most MacBooks, iPads, and many mid-to-high-end Android phones and Windows laptops use DPR 2.
DPR 3x (Super Retina and Flagships)
Three physical pixels per CSS pixel in each direction — nine hardware pixels per logical pixel. This is common on flagship smartphones like the iPhone Pro series and high-end Android devices. At typical phone viewing distances, the pixel grid is completely invisible.
DPR Above 3x
A few devices push to 3.5x or even 4x, though these are uncommon. The visual benefit diminishes past 3x at normal viewing distances, so most manufacturers settle at 2x or 3x.
How DPR Affects What You See on Screen
DPR determines sharpness in a way that resolution alone cannot capture. Two devices can share the same resolution but look dramatically different if their DPR values differ.
Consider a 1920 x 1080 desktop monitor at DPR 1. The browser viewport is 1920 x 1080 CSS pixels, and each one maps to a single hardware pixel. Now consider a phone with a 1080 x 2340 physical resolution and DPR 2.625. The browser sees a viewport of roughly 411 x 891 CSS pixels, but those CSS pixels are rendered with far more physical pixels behind them, producing noticeably sharper text and images.
This is why a webpage looks crisp on your phone but can appear softer on a full-sized monitor with "better" resolution numbers. The monitor has more total pixels spread over a larger area, while the phone concentrates its pixels densely.
DPR on Common Devices
Here is a reference table of device pixel ratios across popular devices. Use it to understand what DPR your audience is likely using.
Smartphones
| Device | Physical Resolution | DPR | CSS Viewport (approx.) |
|---|---|---|---|
| iPhone 16 Pro Max | 1320 x 2868 | 3x | 440 x 956 |
| iPhone 16 / 16 Pro | 1206 x 2622 | 3x | 402 x 874 |
| iPhone SE (3rd gen) | 750 x 1334 | 2x | 375 x 667 |
| Samsung Galaxy S25 Ultra | 1440 x 3120 | 3.5x | 412 x 892 |
| Samsung Galaxy S25 | 1080 x 2340 | 2.625x | 412 x 892 |
| Google Pixel 9 Pro | 1280 x 2856 | 2.625x | 487 x 1088 |
| Google Pixel 9 | 1080 x 2424 | 2.625x | 411 x 923 |
Tablets
| Device | Physical Resolution | DPR | CSS Viewport (approx.) |
|---|---|---|---|
| iPad Pro 13-inch (M4) | 2064 x 2752 | 2x | 1032 x 1376 |
| iPad Air 11-inch (M3) | 1668 x 2388 | 2x | 834 x 1194 |
| iPad (10th gen) | 1640 x 2360 | 2x | 820 x 1180 |
| Samsung Galaxy Tab S10 Ultra | 1848 x 2960 | 2x | 924 x 1480 |
Laptops and Desktops
| Device | Physical Resolution | DPR | CSS Viewport (approx.) |
|---|---|---|---|
| MacBook Pro 16-inch (M-series) | 3456 x 2234 | 2x | 1728 x 1117 |
| MacBook Air 15-inch (M-series) | 2880 x 1864 | 2x | 1440 x 932 |
| MacBook Air 13-inch (M-series) | 2560 x 1664 | 2x | 1280 x 832 |
| Apple Studio Display (27-inch 5K) | 5120 x 2880 | 2x | 2560 x 1440 |
| Dell XPS 15 (4K OLED) | 3840 x 2400 | 2x-2.5x | varies by scaling |
| Standard 1080p desktop monitor | 1920 x 1080 | 1x | 1920 x 1080 |
| Standard 1440p desktop monitor | 2560 x 1440 | 1x | 2560 x 1440 |
| 4K desktop monitor (no scaling) | 3840 x 2160 | 1x | 3840 x 2160 |
| 4K desktop monitor (200% scaling) | 3840 x 2160 | 2x | 1920 x 1080 |
The last two rows are important. A 4K desktop monitor can behave as DPR 1 or DPR 2 depending on the scaling setting in your operating system. At 100% scaling (DPR 1), everything is tiny but you get maximum workspace. At 200% scaling (DPR 2), everything is a comfortable size and razor-sharp — this is effectively the same experience as a Retina MacBook, just on a larger screen.
How to Check Your Device Pixel Ratio
The quickest way is to visit MyScreenResolution.com. The tool reports your DPR alongside your screen resolution and browser viewport size, all in one glance.
If you want to check manually using your browser's developer tools:
- Open your browser (Chrome, Firefox, Edge, Safari).
- Press
F12orCmd + Option + I(Mac) /Ctrl + Shift + I(Windows) to open DevTools. - Go to the Console tab.
- Type
window.devicePixelRatioand press Enter.
The number returned is your current DPR. Note that this value can change if you adjust your OS display scaling or move your browser window to a different monitor.
Why DPR Matters for Web Developers
If you build websites, DPR is not optional knowledge. It directly impacts how your images, icons, and layouts appear on the screens of real users.
Responsive Images and the srcset Attribute
The most practical reason to care about DPR is image delivery. If you serve a 400 x 300 pixel image to a DPR 2 device, the browser stretches those 400 x 300 pixels across 800 x 600 physical pixels. The result is a blurry image.
The fix is the srcset attribute in HTML:
<img
src="photo-400w.jpg"
srcset="photo-400w.jpg 1x, photo-800w.jpg 2x, photo-1200w.jpg 3x"
alt="Example photo"
width="400"
height="300"
/>
The browser reads the user's DPR and picks the appropriate image file. A DPR 1 device gets the 400-pixel-wide image. A DPR 2 device gets the 800-pixel-wide version. A DPR 3 device gets the 1200-pixel-wide version. Every user sees a sharp image without wasting bandwidth.
CSS Media Queries for DPR
You can also target DPR in CSS using the resolution media feature:
/* Standard density */
@media (min-resolution: 1dppx) {
.hero { background-image: url('hero-1x.jpg'); }
}
/* HiDPI / Retina */
@media (min-resolution: 2dppx) {
.hero { background-image: url('hero-2x.jpg'); }
}
/* Super high density */
@media (min-resolution: 3dppx) {
.hero { background-image: url('hero-3x.jpg'); }
}
The unit dppx stands for dots per pixel and maps directly to DPR. A DPR of 2 equals 2dppx.
Canvas and JavaScript Rendering
If you draw on an HTML <canvas>, you need to account for DPR or your graphics will look fuzzy on HiDPI screens. The standard approach:
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');
const dpr = window.devicePixelRatio || 1;
// Set the canvas buffer size to match physical pixels
canvas.width = canvas.clientWidth * dpr;
canvas.height = canvas.clientHeight * dpr;
// Scale the drawing context so coordinates stay logical
ctx.scale(dpr, dpr);
This ensures your canvas content renders at full device resolution.
Performance Trade-offs
Serving higher-resolution images to HiDPI devices means larger file sizes. A 2x image has four times as many pixels as a 1x image, and a 3x image has nine times as many. For bandwidth-constrained users, this matters.
Modern best practice is to combine srcset with responsive sizing (sizes attribute) and next-gen formats like WebP or AVIF. This way you deliver sharp images without bloating page weight unnecessarily.
DPR and Retina Displays
Apple popularized the term "Retina display" when the iPhone 4 launched with a DPR of 2. The marketing promise was simple: pixels are so small that the human eye cannot distinguish individual ones at a typical viewing distance.
Retina is not a technical standard. It is a branding term that Apple applies when the pixel density is high enough that the screen appears smooth at its intended use distance. For iPhones held about 10-12 inches from your face, DPR 2 was the original Retina threshold. When Apple moved to larger phone screens, it pushed to DPR 3 ("Super Retina") to maintain that smoothness.
Other manufacturers use terms like HiDPI, Quad HD, or simply "high resolution," but the underlying concept is the same: pack enough physical pixels behind each logical pixel that the individual dots disappear.
DPR vs PPI: Related but Different
DPR and PPI (pixels per inch) both describe pixel density, but they measure different things.
| DPR | PPI | |
|---|---|---|
| What it measures | Physical pixels per CSS pixel | Physical pixels per physical inch |
| Units | Dimensionless ratio (1x, 2x, 3x) | Pixels per inch |
| Depends on screen size | No | Yes |
| Depends on resolution | Indirectly (via OS scaling) | Directly |
| Used by | Browsers, web developers, OS rendering | Display manufacturers, hardware specs |
| Changes with scaling | Yes | No (fixed by hardware) |
A 27-inch 4K monitor always has approximately 163 PPI regardless of your OS settings. But its DPR changes: set the scaling to 100% and DPR is 1, set it to 200% and DPR is 2. The PPI stays constant because PPI is a physical property of the panel. DPR is a software-level decision about how to map logical pixels to those physical ones.
Both metrics matter. PPI tells you about the hardware's inherent sharpness. DPR tells you how the operating system and browser are using that sharpness.
Practical Implications for Everyday Users
You do not need to be a developer to benefit from understanding DPR. Here is what it means in daily use:
Why your phone screen looks sharper than your monitor. A flagship phone with DPR 3 packs nine physical pixels into every logical pixel. Your office monitor at DPR 1 has a one-to-one mapping. That density difference is why text looks noticeably crisper on the phone, even though the monitor has a higher total resolution.
Why screenshots from your phone look huge on your computer. When you take a screenshot on a DPR 3 phone with a 390 x 844 CSS viewport, the resulting image is 1170 x 2532 physical pixels. Open that on a DPR 1 monitor and the screenshot appears at three times the size you saw it on the phone.
Why display scaling exists. On a 4K monitor at native resolution with DPR 1, everything is tiny because you have 3840 x 2160 pixels on a 27-inch panel. Windows and macOS let you increase scaling (raising the effective DPR to 1.5x or 2x), which makes interface elements larger while keeping them sharp. This is the same principle phones use — they simply do it by default.
Why some websites look blurry. If a website only serves low-resolution images and does not use srcset, those images will look soft on your HiDPI screen. The browser has to stretch each image pixel across multiple physical pixels, and the result is visible blurriness. Well-built sites serve DPR-appropriate assets automatically.
How to find out what your screen is doing. If you are curious about your own setup, head to MyScreenResolution.com to see your DPR, resolution, and viewport in seconds. Knowing your DPR helps you understand why content looks the way it does on your specific device.
Conclusion
Device pixel ratio is the bridge between the physical pixels your screen hardware contains and the logical pixels that software works with. A DPR of 1 means hardware and software pixels match one-to-one. A DPR of 2 or 3 means the screen packs far more physical detail behind each logical point, producing the sharp text and crisp images that modern devices are known for. For developers, DPR dictates how images and graphics should be served. For everyday users, it explains why a phone screen can look sharper than a desktop monitor and why display scaling settings exist. Understanding your device pixel ratio gives you a clearer picture of what your screen is actually doing — and helps you make the most of it.