Screen Resolution
Your display and browser information, updated live.
Common Screen Resolutions Reference
Compare your resolution against popular devices to understand where you sit in the landscape.
| Name | Resolution | DPR | Common devices |
|---|---|---|---|
| Full HD (FHD) | 1920×1080 | 1 | Most desktop monitors, laptops |
| Quad HD (QHD) | 2560×1440 | 1–2 | High-end monitors, gaming displays |
| 4K UHD | 3840×2160 | 2 | Professional monitors, large TVs |
| MacBook Retina 13" | 2560×1600 | 2 | Apple MacBook Pro/Air |
| iPhone 15 Pro | 2556×1179 | 3 | Modern iPhone models |
| Galaxy S24 | 3088×1440 | ~3 | Samsung Galaxy flagship |
| iPad Air | 2360×1640 | 2 | iPad Air (M1+) |
| HD (720p) | 1280×720 | 1 | Budget laptops, older displays |
Why Screen Resolution Matters for Web Development
- →Responsive breakpoints in CSS are based on viewport width in CSS pixels — not physical resolution. A 4K monitor at 200% OS scaling behaves like a 1920px viewport to browsers.
- →Retina images need to be 2× or 3× the CSS size. Use
srcsetwith2xdescriptors or serve WebP for automatic quality scaling. - →1px CSS border on a DPR-3 screen renders as 3 physical pixels. Use
border-width: 0.333pxor SVG borders for true 1-pixel hairlines on high-DPI screens. - →Test at 375px viewport (iPhone SE) as the minimum — this is the narrowest mainstream mobile viewport and the hardest to design for.
Frequently Asked Questions
What is the difference between screen resolution and viewport size?
Screen resolution is the total number of physical pixels your monitor has (e.g. 1920×1080). Viewport size is the area in CSS pixels available to a web page in your current browser window — it changes when you resize or zoom. Web layouts are designed against viewport size, not screen resolution.
What is Device Pixel Ratio (DPR)?
DPR is the ratio of physical pixels to CSS pixels. A DPR of 2 (Retina display) means 4 physical pixels are used per CSS pixel, resulting in sharper images. Standard displays have DPR = 1. High-DPI displays (Retina, AMOLED) typically have DPR of 2 or 3. Web images need to be 2× or 3× the CSS size to look sharp on these displays.
What is colour depth?
Colour depth (bit depth) is the number of bits used to represent each pixel’s colour. 24-bit (16.7 million colours) is standard for modern displays. 32-bit includes an alpha (transparency) channel. Colour depth affects how smoothly gradients and images are rendered.
Why does my viewport change when I zoom in?
Browser zoom reduces the viewport size in CSS pixels because more physical pixels are used per CSS pixel. At 200% zoom on a 1920-wide screen, the effective CSS viewport is 960px wide. This is why responsive breakpoints trigger at different zoom levels.
Who uses a screen resolution checker?
Web developers use it to debug responsive layouts. QA testers use it to reproduce viewport-specific bugs. Designers use it to understand what their designs look like on a target device. Gamers and content creators check their display capabilities.
Is this screen resolution checker free?
Completely free. It reads your display info directly from the browser API and shows it instantly.
What users say about Screen Resolution Checker
Real feedback from ToolsBear users — reviewed and approved by our team.