About Screen Resolution
Your screen resolution is the number of physical pixels your display contains — a hardware property that never changes while you use the device. Your viewport size is how many CSS pixels your browser has available to render the page, which is often much smaller because of browser chrome (tabs, address bar, bookmarks bar) and, on desktop, the operating system taskbar or macOS dock.
This tool shows you both — plus the relationship between them (device pixel ratio) and other properties that matter for responsive design, image assets and accessibility.
The four sizes that matter
| Property | What it means |
|---|---|
| Screen resolution | The physical pixel count of the entire display, e.g. 1920×1080 |
| Available screen | Screen minus OS-level chrome (taskbar, dock, menu bar) |
| Outer window | The whole browser window including its own chrome |
| Viewport | The area the page actually renders in — this is what CSS media queries measure |
When someone asks "what's my screen resolution?" they usually mean the first one. When a designer says "the breakpoint is 768px," they mean the fourth one.
Device pixel ratio (DPR)
Device pixel ratio is how many physical pixels the OS uses to draw one CSS pixel:
- DPR 1 — one CSS pixel = one physical pixel. Standard non-Retina monitors.
- DPR 1.25, 1.5 — common on Windows at 125% or 150% scaling, and on 4K monitors.
- DPR 2 — Retina MacBooks, most modern phones, many 4K screens at 200%.
- DPR 3 — Some high-end phones (iPhone Pro, many Android flagships).
For images, a DPR of 2 means you should serve assets at 2× their CSS size (e.g. srcset with 2x) so they look crisp on Retina displays. For canvas, you multiply the drawing buffer by DPR to avoid blurry output.
Common screen resolutions
| Name | Resolution | Typical use |
|---|---|---|
| HD | 1280×720 | Older laptops, small TVs |
| Full HD (FHD) | 1920×1080 | Most common desktop resolution |
| QHD / 1440p | 2560×1440 | 27"–32" monitors |
| 4K UHD | 3840×2160 | Large monitors, 4K TVs |
| 5K | 5120×2880 | iMac 5K, professional displays |
| Mobile (typical) | 390–430 CSS px wide | iPhone / Android viewports |
Common responsive breakpoints
Modern CSS frameworks use these breakpoints (in CSS pixels):
| Framework | Breakpoints |
|---|---|
| Tailwind | 640 / 768 / 1024 / 1280 / 1536 |
| Bootstrap 5 | 576 / 768 / 992 / 1200 / 1400 |
| Material UI | 600 / 900 / 1200 / 1536 |
| Bulma | 769 / 1024 / 1216 / 1408 |
What is PPI?
PPI (pixels per inch) measures how densely packed the pixels are on a display. It is the pixel diagonal divided by the physical diagonal:
PPI = √(width² + height²) ÷ diagonal_inches
A 24" 1920×1080 monitor has about 92 PPI. A 27" 4K display has about 163 PPI. A modern phone at 460 PPI is considered "Retina" — you can no longer see individual pixels at normal viewing distance. Higher PPI means sharper text, smoother images and more comfortable reading.
Common use cases
Responsive testing
Resize your browser to hit each breakpoint.
Image asset planning
Know your DPR to pick the right srcset.
Design handoff
Confirm what CSS pixels the designer's breakpoints map to.
Debugging layout
Verify media queries are triggering correctly.
Display shopping
Compare PPI between monitors before buying.
Mobile design
Test real device viewports in the browser.
Privacy
This screen resolution checker runs entirely in your browser. All measurements are taken from standard browser APIs (screen, window, devicePixelRatio). Nothing is transmitted, stored or logged.