Screen Resolution Checker

Check your screen resolution, viewport size, device pixel ratio, and colour depth.

Your Device Information

CSS Breakpoints Reference

How It Works

Simply load the page. Your screen's resolution, viewport dimensions, device pixel ratio, orientation, and colour depth are detected and displayed automatically.

**Screen Resolution Checker — Know Your Display Properties**

Understanding your display properties is useful for web development, design, and troubleshooting display issues. Our Screen Resolution Checker detects all key properties of your screen and browser viewport instantly.

**What It Detects**

**Screen Resolution**
The total number of physical pixels on your display. Reported by the operating system.
Example: 1920×1080 (Full HD), 2560×1440 (QHD), 3840×2160 (4K UHD)

**Viewport Size**
The visible area of your browser window, excluding toolbars and scrollbars. This is what CSS media queries respond to.
Note: Viewport changes when you zoom or resize the browser window.

**Device Pixel Ratio (DPR)**
The ratio of physical pixels to CSS pixels. High-DPR (Retina) displays use 2× or 3× pixels per CSS pixel.
- DPR 1: Standard display
- DPR 2: Retina/HiDPI (most modern laptops and phones)
- DPR 3: Super Retina (iPhone Pro, high-end Android)

**CSS Pixel Dimension**
The logical dimensions used by CSS = Screen Resolution ÷ DPR
A 2560×1600 screen at DPR 2 has CSS dimensions of 1280×800.

**Colour Depth**
Bits per pixel. Standard modern displays are 24-bit (16.7 million colours). HDR displays are 30-bit or 48-bit.

**Orientation**
Portrait (height > width) or Landscape (width > height). Useful for responsive design testing.

**Common Resolutions Reference**

| Resolution | Name | Common Device |
|---|---|---|
| 1366×768 | HD | Budget laptops |
| 1920×1080 | Full HD | Most monitors |
| 2560×1440 | QHD/2K | Gaming monitors |
| 3840×2160 | 4K UHD | High-end monitors |
| 375×812 | iPhone X | Mobile |
| 1170×2532 | iPhone 12 Pro | Mobile |

**Why This Matters for Web Development**

Knowing your viewport size helps you test responsive design breakpoints. DPR affects whether you need to serve @2x images. Screen size stats from analytics help you prioritise which viewport sizes to optimise.

Frequently Asked Questions

Screen resolution is the total pixels of your display hardware. Viewport is the visible area in your browser window — smaller than screen resolution because of toolbars, taskbars, and borders.
DPR is the ratio of physical pixels to CSS pixels. A DPR of 2 (Retina) means the display uses 2 physical pixels for every 1 CSS pixel, resulting in sharper rendering.
A CSS pixel is a logical unit used by browsers for layout. On a standard display, 1 CSS pixel = 1 physical pixel. On a Retina display at DPR 2, 1 CSS pixel = 2×2 physical pixels.
Use browser DevTools (F12) → Responsive Design Mode to simulate different viewport sizes and device pixel ratios without needing physical devices.
According to StatCounter, 1920×1080 is the most common desktop resolution globally. For mobile, 360–390px wide viewports are most common (Android and iPhone respectively).