# Screen Resolution Detector

> Instantly detect your screen resolution, viewport size, device pixel ratio, and color depth. Essential for developers testing responsive designs and users checking display specifications.

**Category:** Dev
**Keywords:** screen resolution, viewport size, device pixel ratio, DPR, color depth, display, monitor, responsive design, screen size, pixel density, retina, aspect ratio, window size
**URL:** https://complete.tools/screen-resolution-detector

## How it calculates

**Effective Resolution:**
```
Effective Width = Screen Width x Device Pixel Ratio
Effective Height = Screen Height x Device Pixel Ratio
```
For example, a 1920 x 1080 screen with a 2x DPR (Retina display) actually renders 3840 x 2160 physical pixels.

**Aspect Ratio:**
```
Aspect Ratio = Width / GCD(Width, Height) : Height / GCD(Width, Height)
```
The tool reduces dimensions by their greatest common divisor, then fuzzy-matches against well-known ratios like 16:9, 4:3, and 21:9 for a clean label.

## Key metrics explained

- **Screen Resolution**: Your display's full dimensions in CSS pixels, as reported by the operating system.
- **Viewport Size**: The inner dimensions of the browser window, which change when you resize.
- **Device Pixel Ratio (DPR)**: How many physical pixels map to one CSS pixel. A DPR of 2 means Retina or HiDPI.
- **Color Depth**: Bits per pixel for color rendering. 24-bit means true color (16.7 million colors).
- **Orientation**: Whether the display is in landscape or portrait mode and its rotation angle.
- **Effective Resolution**: The true number of hardware pixels being rendered, calculated by multiplying screen resolution by DPR.

## Who should use this

- **Web developers**: Check viewport dimensions and DPR when building responsive layouts and testing media queries.
- **Designers**: Verify that assets look sharp on high-DPI displays and confirm aspect ratios for mockups.
- **Gamers**: Confirm your native resolution and pixel density before adjusting in-game graphics settings.
- **IT support**: Quickly identify a user's display configuration when troubleshooting layout or rendering issues.
- **Anyone curious**: Find out the exact specifications of the screen you are using right now.

## How to use

1. Open this tool in your browser — your display information appears automatically.
2. Resize the browser window to watch the viewport dimensions update in real time.
3. Rotate a mobile device or tablet to see the orientation value change.
4. Use the badges in the Display Summary section for a quick overview of your screen characteristics.

---

*Generated from [complete.tools/screen-resolution-detector](https://complete.tools/screen-resolution-detector)*