What Is My Screen Resolution?
Your screen size, viewport, pixel ratio and aspect ratio.
Runs entirely in your browser
Loading the tool…
…
—
- —Browser viewport
- —Pixel ratio
- —Aspect ratio
- —Megapixels
| Screen resolution | — |
|---|---|
| Available screen area | — |
| Browser viewport | — |
| Physical pixels | — |
| Orientation | — |
| Device class | — |
| Colour depth | — |
| Touch points | — |
| Prefers dark mode | — |
| Prefers reduced motion | — |
Resize the window and these figures update live.
Two numbers matter and people mix them up. Screen resolution is the whole display. Viewport size is the part your browser can draw in. It is smaller, because of browser chrome, and it is the one your CSS media queries respond to. Both are shown below, live, as you resize.
The device pixel ratio explains the rest: a "2×" phone reports a 390-pixel-wide viewport while physically having 1170 pixels across, which is why images need to be larger than their CSS size to look sharp.
How to use it
- Read your screen resolution and viewport size below. Nothing to press.
- Resize the window to watch the viewport figures update live.
- Use the physical pixel figures when exporting images for this display.
Questions
Why is my viewport smaller than my screen?
The viewport excludes the browser's tabs, address bar and scrollbars, and on a phone it excludes the system status bar. CSS media queries use the viewport, not the screen.
What is a device pixel ratio?
The number of physical pixels per CSS pixel. 1 is a classic display, 2 or 3 is a Retina-class phone or laptop. Multiply CSS dimensions by it to get the real pixel count.
My screen is 4K but this says 2560×1440. Why?
Operating system display scaling. At 150% scaling a 3840-pixel display reports a 2560-pixel logical resolution, which is what the browser sees and what your layout should target.
What resolution should I design for?
None of them, specifically. Design fluid and pick breakpoints from where your own layout breaks, then sanity-check against the clusters above. The single most common desktop viewport is narrower than the most common desktop screen, because people do not maximise their browser windows.
Is 4K the same as UHD?
Not quite. True DCI 4K is 4096 x 2160 and lives in cinema projection. What is sold as 4K for televisions and monitors is UHD, 3840 x 2160, which is exactly four 1080p panels in a grid. The difference matters when you are handed footage that does not fit.
Why do my exported images look blurry on this screen?
Because you exported at the CSS size on a display that draws two or three physical pixels per CSS pixel. Export at 2x or 3x the CSS dimensions and let the browser scale down, or use SVG where the artwork allows it.
Does this see my second monitor?
It reports the display the browser window is currently on. Drag the window to another screen and the figures change, which is a quick way to confirm what each monitor is really running at rather than what the settings panel claims.
The resolutions worth knowing
| Name | Pixels | Aspect | Where you meet it |
|---|---|---|---|
| HD, 720p | 1280 x 720 | 16:9 | Budget laptops, older streaming |
| Full HD, 1080p | 1920 x 1080 | 16:9 | The most common desktop panel |
| WUXGA | 1920 x 1200 | 16:10 | Laptops that kept the taller shape |
| QHD, 1440p | 2560 x 1440 | 16:9 | Gaming and design monitors |
| Ultrawide | 3440 x 1440 | 21:9 | Curved desk monitors |
| UHD, 4K | 3840 x 2160 | 16:9 | Televisions and high-end monitors |
| DCI 4K | 4096 x 2160 | 17:9 | Cinema projection, not consumer screens |
| 5K | 5120 x 2880 | 16:9 | 27-inch Retina-class desktops |
| 8K UHD | 7680 x 4320 | 16:9 | Televisions, rarely a browser |
Phones are a different conversation, because the number on the box is not the number your CSS sees. A recent iPhone reports a viewport around 390 to 430 CSS pixels wide while the panel has two or three times that across, and Android flagships land in the same band. If you are choosing breakpoints, the useful clusters are roughly 360 to 430 for phones, 768 to 834 for tablets held upright, and 1280 to 1536 for the desktop window someone actually leaves open, which is usually not maximised.
Your data stays on your device
Everything above runs inside your browser as WebAssembly compiled from Rust. Nothing you type is uploaded, logged or stored on a server. You can load this page once, go offline, and it still works.
This page makes no requests at all, to anywhere. That is not a promise in the copy: it is a Content-Security-Policy header your browser enforces, and connect-src on it is none. Open the network tab and watch nothing happen.