retina hidpi screen and dpr
"Retina" is the marketing name Apple gave to HiDPI screens, the ones where devicePixelRatio is 2 or higher: on those, every CSS pixel in the layout is drawn using a grid of several physical pixels, gaining sharpness without anything on the page looking smaller. This page shows the math behind that grid at DPR 1, 2 and 3.
This is the setup on older office monitors and on most external monitors still sold today: no multiplication happens between the CSS layout and the physical panel.
This is the most common DPR on Retina laptops and on most mid-range smartphones, doubling density along each axis without changing the visual size of the content.
DPR 3 is common on compact, high-density phone screens; on those devices, a regular `1x` image looks visibly blurry and only the `3x` version of the `srcset` fills the full grid.
Screen resolution (screen.width and screen.height) is the size of the whole display as the browser reports it, in CSS pixels. The viewport (window.innerWidth and innerHeight) is only the area where the page is drawn, so it shrinks with the window, toolbars, sidebars and page zoom. Physical resolution is the real number of pixels on the panel, which this tool estimates as CSS pixels times the devicePixelRatio. On a plain monitor at 100% scaling they match, on phones and scaled laptops they differ a lot.
Not necessarily for the user experience: a higher DPR needs more image data to avoid blur (a `3x` image has nine times more pixels than the equivalent `1x`), which increases page weight and the battery cost of rendering every frame, so the sharpness gain needs to be weighed against performance.
No: DPR depends on the relationship between physical pixels and the scale factor configured in the operating system, not only on the nominal resolution. A 27-inch 4K monitor running without scaling on Windows can report DPR 1 with tiny CSS pixels, while the same panel at 200% scaling reports DPR 2.
This tool reads `window.devicePixelRatio` directly in your browser and shows the value on screen; there is no reliable way to guess the DPR from a device model alone, because the same hardware can report different values depending on the operating system scale the user has chosen.
Because the camera captures at the sensor full physical resolution, far above the screen CSS pixel resolution; when that photo is displayed at a reduced size on the page, the browser has plenty of physical pixels left to fill the DPR grid without stretching anything, which is why it looks sharp even while taking up little CSS space.
… px
Estimate: CSS pixels times DPR. System scaling and page zoom can change it.
Samples frames for 2 s and uses the median.
Press the button to measure.
Measures what the browser draws, not the monitor's limit.
Reading the viewport width...
| Breakpoint | From | Up to |
|---|---|---|
base | 0 px | 639 px |
sm | 640 px | 767 px |
md | 768 px | 1,023 px |
lg | 1,024 px | 1,279 px |
xl | 1,280 px | 1,535 px |
2xl | 1,536 px | and above |
| Breakpoint | From | Up to |
|---|---|---|
xs | 0 px | 575 px |
sm | 576 px | 767 px |
md | 768 px | 991 px |
lg | 992 px | 1,199 px |
xl | 1,200 px | 1,399 px |
xxl | 1,400 px | and above |
Framework defaults (min-width in CSS pixels).
Enter the diagonal to see PPI, size and distance.
Pick or type a diagonal.
Reading your screen...
Rectangles to scale: area shows the pixel count.
| Name | Resolution | Megapixels | Ratio | vs 1080p |
|---|---|---|---|---|
| HD (720p) | 1,280 × 720 | 0.92 | 16:9 | 0.44× |
| WXGA (HD 768p) | 1,366 × 768 | 1.05 | 16:9 | 0.51× |
| HD+ (900p) | 1,600 × 900 | 1.44 | 16:9 | 0.69× |
| Full HD (1080p) | 1,920 × 1,080 | 2.07 | 16:9 | 1× |
| WUXGA | 1,920 × 1,200 | 2.3 | 16:10 | 1.11× |
| QHD (1440p) | 2,560 × 1,440 | 3.69 | 16:9 | 1.78× |
| UltraWide QHD (UWQHD) | 3,440 × 1,440 | 4.95 | 21:9 | 2.39× |
| 4K UHD (2160p) | 3,840 × 2,160 | 8.29 | 16:9 | 4× |
| 5K | 5,120 × 2,880 | 14.75 | 16:9 | 7.11× |
| 8K UHD (4320p) | 7,680 × 4,320 | 33.18 | 16:9 | 16× |
Read only when you click.
Nothing is sent. The browser rounds memory.
For bug reports or support. JSON has every field.
Everything is read locally. Nothing is sent.