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.
Frequently Asked Questions
What is the most common screen resolution in 2024?
According to StatCounter, 1920×1080 (Full HD) remains the most common desktop screen resolution globally, used by roughly 25% of desktop users. 1366×768 is the second most common on laptops, while 1280×800 and 1440×900 are common on MacBooks. For mobile, display resolutions vary widely but most modern flagships are between 390×844 and 430×932 at 2× or 3× DPR.
Why does my screen resolution look different in Windows settings vs this tool?
Windows display settings show the physical pixel resolution of your monitor. If you have display scaling enabled (e.g. 125% or 150% scaling), your effective CSS resolution will be lower than the physical resolution. For example, a 1920×1080 monitor at 125% scaling appears as 1536×864 in CSS and browser viewport measurements.
How do I check screen resolution on a Mac?
On Mac, go to Apple menu → System Settings → Displays. The resolution shown is the scaled logical resolution. To see the physical resolution, this tool shows both the physical screen pixels and the CSS logical resolution separately.
What resolution should I design my website for?
Design for a fluid layout that works across all sizes rather than a fixed target resolution. Use CSS breakpoints to adapt your layout. If you must choose a primary target, 1440px CSS width is a common design canvas size that covers most desktop users without wasted space on typical laptops.
What is 4K resolution in pixels?
4K UHD (Ultra High Definition) is 3840×2160 pixels — exactly four times the pixel count of 1080p (1920×1080). The "4K" name comes from the approximately 4000 horizontal pixels. Cinema 4K (DCI 4K) is slightly different at 4096×2160.