Screen Resolution Checker — What Is My Screen Resolution?
Our free screen resolution checker instantly shows your screen resolution, browser viewport size, device pixel ratio, CSS logical resolution, color depth, and orientation — all automatically detected from your device. The viewport size updates live as you resize your browser window, making this useful for responsive web design testing.
Screen Resolution vs Viewport Size — What Is the Difference?
These two measurements are frequently confused but serve different purposes:
| Measurement | What it measures | API used | Typical value (1080p laptop) |
|---|---|---|---|
| Screen Resolution | Physical pixels of the display hardware | window.screen.width × window.screen.height | 1920 × 1080 |
| Available Screen Size | Screen minus OS taskbar/dock | window.screen.availWidth × availHeight | 1920 × 1040 |
| Viewport Size | Visible browser content area | window.innerWidth × window.innerHeight | 1440 × 900 |
| CSS Resolution | Logical pixels for layout (÷ DPR) | Calculated from screen + DPR | 1920 × 1080 (DPR 1) or 960 × 540 (DPR 2) |
| Window Outer Size | Browser window including UI chrome | window.outerWidth × window.outerHeight | 1440 × 960 |
What Is Device Pixel Ratio?
Device pixel ratio (DPR) is the ratio of physical screen pixels to CSS logical pixels. It was introduced to handle high-density "Retina" displays that pack more pixels into the same physical space, allowing text and images to appear sharper without changing the layout dimensions that web developers work with.
On a MacBook Pro Retina display with DPR 2, a CSS element sized at 100×100 pixels actually occupies 200×200 physical pixels — four times as many pixels. This is why images on Retina displays need to be provided at 2× resolution (using srcset or CSS media queries) to look sharp.
| DPR | Display type | Example devices | Physical pixels per CSS pixel |
|---|---|---|---|
| 1.0 | Standard density | Most desktop monitors, older laptops | 1 physical per CSS pixel |
| 1.25 | Slightly high DPI | Some Windows laptops | 1.25 physical per CSS pixel |
| 1.5 | Medium high DPI | Some Android phones, Windows laptops | 1.5 physical per CSS pixel |
| 2.0 | Retina / High DPI | MacBook Pro, iPhone, iPad, many Android | 4 physical per CSS pixel (2×2) |
| 3.0 | Super Retina | iPhone Pro models, high-end Android | 9 physical per CSS pixel (3×3) |
| 4.0 | Ultra high DPI | Some Android flagship phones | 16 physical per CSS pixel (4×4) |
Common Screen Resolutions Reference
Here are the most common screen resolutions across devices, from mobile to professional displays (aspect ratios are approximate):
| Resolution | Name | Device category | Aspect ratio |
|---|---|---|---|
| 320 × 568 | — | Mobile (small) | 16:9 |
| 375 × 667 | — | Mobile (iPhone 8) | 16:9 |
| 390 × 844 | — | Mobile (iPhone 14) | 19.5:9 |
| 414 × 896 | — | Mobile (iPhone 11) | 19.5:9 |
| 768 × 1024 | XGA | Tablet (iPad) | 4:3 |
| 1280 × 720 | HD / 720p | Laptop, TV | 16:9 |
| 1280 × 800 | WXGA | MacBook Air 13" | 16:10 |
| 1366 × 768 | — | Most common laptop | 16:9 |
| 1440 × 900 | WXGA+ | MacBook Pro 13" | 16:10 |
| 1536 × 864 | — | Windows laptop | 16:9 |
| 1920 × 1080 | Full HD / 1080p | Desktop, laptop, TV | 16:9 |
| 2560 × 1440 | QHD / 2K | Gaming monitor, iMac | 16:9 |
| 2560 × 1600 | — | MacBook Pro 14" | 16:10 |
| 3840 × 2160 | 4K UHD | Professional monitor, TV | 16:9 |
| 5120 × 2880 | 5K | iMac 27", Studio Display | 16:9 |
Screen Resolution for Web Developers
Web developers use screen resolution and viewport data constantly for responsive design. The most important values are the CSS viewport width and the device pixel ratio, as these determine which CSS media queries trigger and how images should be served.
CSS Media Query Breakpoints
CSS media queries use the CSS viewport width — not the physical screen resolution — to apply responsive styles. Common breakpoints used by major CSS frameworks:
| Breakpoint name | CSS width | Typical target devices |
|---|---|---|
| xs (extra small) | < 576px | Small mobile phones |
| sm (small) | ≥ 576px | Mobile phones |
| md (medium) | ≥ 768px | Tablets |
| lg (large) | ≥ 992px | Small laptops, desktops |
| xl (extra large) | ≥ 1200px | Desktops, large laptops |
| xxl | ≥ 1400px | Large desktops |
Serving the Right Image Resolution
To serve sharp images on Retina displays, provide multiple image sizes using the HTML srcset attribute. For a 400px-wide image:
<img src="image.jpg" srcset="image.jpg 1x, image@2x.jpg 2x, image@3x.jpg 3x" width="400" /> The browser automatically selects the appropriate resolution based on the device's DPR.