Screen resolution should be simple — width times height — and it is not, because there are two different kinds of pixel, three competing names for the same 4K, and a gap between what a screen physically has and what your CSS is told about. This page sorts out all of it, with the reference tables at the top and the explanations underneath.
The one thing that causes most confusion
A physical pixel is a dot on the panel. A CSS pixel is a unit of layout. On a modern phone, three physical pixels sit inside one CSS pixel — so a screen with 1179 real pixels across reports itself as 393 pixels wide to your stylesheet. Design against CSS pixels; the physical count only matters for images.
Standard display resolutions
| Name | Resolution | Ratio | Megapixels | Where you see it |
|---|---|---|---|---|
| nHD | 640 × 360 | 16:9 | 0.23 | Low-end phones, video thumbnails |
| SVGA | 800 × 600 | 4:3 | 0.48 | Legacy projectors |
| XGA | 1024 × 768 | 4:3 | 0.79 | Old monitors, budget projectors |
| WXGA / HD | 1280 × 720 | 16:9 | 0.92 | "720p" — entry-level video |
| WXGA | 1366 × 768 | ~16:9 | 1.05 | Budget laptops for over a decade |
| HD+ | 1600 × 900 | 16:9 | 1.44 | Mid-range laptops |
| Full HD | 1920 × 1080 | 16:9 | 2.07 | "1080p" — the most common resolution on earth |
| WUXGA | 1920 × 1200 | 16:10 | 2.30 | Productivity monitors, MacBooks |
| QHD / 1440p | 2560 × 1440 | 16:9 | 3.69 | Gaming and pro monitors |
| WQXGA | 2560 × 1600 | 16:10 | 4.10 | MacBook Pro 13", tablets |
| UWQHD | 3440 × 1440 | 21:9 | 4.95 | Ultrawide monitors |
| 4K UHD | 3840 × 2160 | 16:9 | 8.29 | Every consumer "4K" TV and monitor |
| DCI 4K | 4096 × 2160 | ~17:9 | 8.85 | Cinema projection — the real 4K |
| 5K | 5120 × 2880 | 16:9 | 14.75 | Apple Studio Display, iMac |
| DQHD | 5120 × 1440 | 32:9 | 7.37 | Super-ultrawide — two 1440p side by side |
| 6K | 6144 × 3456 | 16:9 | 21.23 | Pro Display XDR (6016 × 3384) |
| 8K UHD | 7680 × 4320 | 16:9 | 33.18 | High-end TVs; almost no content |
⚠️ "4K" is a marketing term, and it is wrong
The K naming counts horizontal pixels in thousands, while the older p naming counts vertical lines. So 1080p and 2K describe nearly the same thing from opposite directions. Worse, consumer 4K is 3840 wide — which is not four thousand anything. It was called 4K because it is four times 1080p in area, and the name stuck despite being arithmetically indefensible. If precision matters, state the resolution.
CSS pixels, physical pixels and DPR
This is the concept that makes everything else fall into place.
When screens were around 96 pixels per inch, one CSS pixel could sensibly be one physical pixel. Then high-density displays arrived with three or four times the pixel density, and that equivalence broke: at 460 pixels per inch, 16-pixel text would be about a millimetre tall and completely unreadable.
The solution was to decouple the two. A CSS pixel became a unit of apparent size — roughly 1/96 inch as seen by the user — and the device pixel ratio (DPR) records how many physical pixels are packed into each one.
The practical consequences are worth stating explicitly:
- Layout is in CSS pixels. A media query at
768pxmeans 768 CSS pixels, whatever the panel density. - Images need physical pixels. A 100 CSS-pixel-wide image on a DPR 3 screen needs a 300-pixel-wide file to look sharp. This is exactly what
srcsetexists to solve. - DPR is not always a whole number. Windows scaling at 125% or 150% produces a DPR of 1.25 or 1.5, and a browser zoom changes it too.
💡 Stop at 2x for photographs
The visible return from 3x images is small and the file size cost is large — a 3x image has 2.25 times the pixels of a 2x one. For photographs, serving 2x to every high-density screen is the sensible default. Sharp-edged graphics such as logos and icons benefit more, and the correct answer for those is usually SVG, which is resolution-independent by nature.
CSS widths that actually matter
You never need a list of every phone. Device CSS widths cluster into a handful of values, and covering those covers essentially the whole market.
| CSS width | Typical DPR | Class of device |
|---|---|---|
| 320 | 2 | Oldest supported phones — the practical floor |
| 360 | 2–3 | The most common Android width worldwide |
| 375 | 2–3 | Compact iPhones |
| 390–393 | 3 | Standard modern iPhones and flagship Android |
| 412–430 | 2.6–3 | Large phones and Pro Max models |
| 768 | 2 | Tablets in portrait — the classic breakpoint |
| 820–834 | 2 | Larger tablets in portrait |
| 1024 | 1–2 | Tablets in landscape, small laptops |
| 1280 | 1–2 | Laptops, the common desktop minimum |
| 1440 | 1–2 | The most common desktop design width |
| 1920 | 1 | Full-screen desktop monitors |
Breakpoints worth using
Do not build a breakpoint per device — that is an arms race you lose. Build them where your layout stops working, then check the result against the cluster above.
That last rule reflows correctly at every width from 320 to 5120 without a single media query. Modern CSS has largely made device-width tables a historical curiosity — the reason to know them now is for testing, not for authoring.
Pixel density and viewing distance
Resolution alone says nothing about sharpness; you also need screen size. Density in pixels per inch is what determines whether you can see individual pixels.
| Device | Resolution | Diagonal | Approx. PPI |
|---|---|---|---|
| Budget laptop | 1366 × 768 | 15.6" | ~100 |
| Standard monitor | 1920 × 1080 | 24" | ~92 |
| QHD monitor | 2560 × 1440 | 27" | ~109 |
| 4K monitor | 3840 × 2160 | 27" | ~163 |
| 4K monitor | 3840 × 2160 | 32" | ~138 |
| Laptop retina | 2560 × 1600 | 13.3" | ~227 |
| Modern phone | 1179 × 2556 | 6.1" | ~460 |
| 65" 4K TV | 3840 × 2160 | 65" | ~68 |
Notice the television: 68 PPI would look coarse on a desk and looks perfect from three metres away. Density has to be judged against viewing distance. The rough threshold at which the eye stops resolving individual pixels is about 60 PPI per metre of viewing distance — which is why a phone held 30 cm away needs several hundred PPI and a TV across the room needs under 70.
This is also the honest answer on 8K: at normal living-room distances, most people cannot distinguish 8K from 4K on a 65-inch screen. The resolution is real; the visible benefit at typical viewing distance is not.
Aspect ratios in use
| Ratio | Decimal | Used by |
|---|---|---|
| 4:3 | 1.33 | Legacy monitors, iPads, older projectors |
| 3:2 | 1.50 | Surface devices, some Chromebooks |
| 16:10 | 1.60 | MacBooks, productivity monitors — more vertical space |
| 16:9 | 1.78 | The default for televisions, monitors and video |
| 18:9 to 21:9 | 2.00–2.33 | Phones in portrait, ultrawide monitors |
| 32:9 | 3.56 | Super-ultrawide monitors |
16:10 is worth a mention because it is quietly returning. The industry moved to 16:9 in the 2000s because panels could be cut from the same production lines as televisions, not because it suited computing. Documents, code and web pages are all vertical, and 16:10 gives roughly 11% more vertical space at the same width — which is why premium laptops have been drifting back to it.
Working out dimensions for a specific ratio?
Enter any width or height and get the matching dimension for any aspect ratio, instantly.
Open the Aspect Ratio Calculator →Checking what a real device reports
Rather than trusting a specification sheet, ask the browser:
Two cautions when testing. Browser device-emulation modes give correct CSS widths but cannot reproduce real touch behaviour, actual rendering performance, or how the on-screen keyboard resizes the viewport. And innerHeight on mobile changes as the browser chrome hides on scroll — which is why 100vh has historically been unreliable there, and why 100dvh (dynamic viewport height) was introduced to fix it.
Summary
- CSS pixels ≠ physical pixels. Divide the panel resolution by the device pixel ratio to get what your stylesheet sees.
- Design against CSS widths — roughly 360–430 mobile, 768–834 tablet, 1280–1440 desktop.
- Serve images at physical resolution using
srcset, but stop at 2x for photographs. - Consumer 4K is 3840 × 2160. True DCI 4K is 4096 × 2160 and you will rarely meet it.
- Density must be judged against viewing distance. A 68 PPI television looks flawless; a 68 PPI monitor would not.
- Prefer intrinsically fluid layouts to breakpoint tables —
auto-fitandminmaxhandle every width without a media query.
Frequently Asked Questions
What is the difference between 4K and UHD?
They are different resolutions that get used interchangeably. True DCI 4K, the cinema standard, is 4096 × 2160. Consumer UHD, which is what every television and monitor sold as '4K' actually is, is 3840 × 2160 — exactly four times 1080p. The 256-pixel width difference exists because cinema uses a slightly wider aspect ratio than television.
Why does my phone screen say 393 pixels wide in CSS?
Because CSS pixels are not physical pixels. A modern phone packs three physical pixels into the space of one CSS pixel — a device pixel ratio of 3 — so a display with 1179 physical pixels reports 393 CSS pixels. This keeps text readable: if CSS used physical pixels, 16px type would be microscopic on a high-density screen.
What screen resolution should I design for?
Design for CSS widths, not physical resolutions. The values that matter are roughly 360–430 for phones, 768–834 for tablets, and 1280–1440 for laptops. If you optimise for one number, make it 390 for mobile and 1440 for desktop — but build fluid layouts and the exact figures stop mattering.
Is 1440p much better than 1080p?
1440p (2560 × 1440) has 1.78 times the pixels of 1080p, and the difference is clearly visible on any monitor 27 inches or larger at normal desk distance. On a 24-inch monitor the gain is smaller, and on a laptop screen under 15 inches most people cannot reliably tell without comparing side by side.
What does the p in 1080p mean?
Progressive scan — every line of the image is drawn in each frame. It contrasts with 'i' for interlaced, as in 1080i, where alternate lines are drawn on alternate frames. Interlacing was a bandwidth trick from analogue broadcasting; essentially everything today is progressive, so the p is now just habit.