What is device pixel ratio (DPR)?

Device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels on a display. A DPR of 2 means each CSS pixel is rendered using 2x2 = 4 physical pixels. High-DPI displays like Apple Retina have a DPR of 2 or 3, resulting in sharper text and images.

What is the difference between screen resolution and viewport size?

Screen resolution is the total number of pixels on your physical display. Viewport size is the visible area of the web page within the browser window, which is typically smaller than the screen resolution because it excludes the browser's UI elements like the address bar, tabs, and bookmarks bar.

Why do the values update when I resize my browser?

The viewport size and browser window size change when you resize your browser window. This tool listens for resize events and updates the displayed values in real-time. Screen resolution remains constant as it reflects your physical display, not the browser window size.

Color depth indicates the number of bits used to represent the color of a single pixel. A 24-bit color depth supports 16.7 million colors (8 bits each for red, green, and blue). Most modern displays use 24-bit or 32-bit color depth.

Screen Resolution Checker

Device Information

💻

Screen Resolution

--

🔮

Physical Resolution

--

👁

Viewport Size

--

📂

Browser Window

--

🔬

Device Pixel Ratio

--

🎨

Color Depth

--

🔄

Orientation

--

🖶

Available Screen

--

✋

Touch Support

--

🖥

Platform

--

🌐

Language

--

🍪

Cookies

--

🔌

Connection

--

⚙

CPU Cores

--

💾

Device Memory

--

User Agent

--

Screen Size Comparison

How It Works

💻

Complete Display Info

Detect screen resolution, viewport size, pixel ratio, color depth, orientation, available screen area, touch support, and platform -- all in one place.

⚡

Real-Time Updates

Values update instantly as you resize your browser window or change orientation. The live badge indicates that all data is refreshed in real-time.

📋

Copy All Info

Copy all device information to your clipboard with a single click. Perfect for sharing specs, reporting bugs, or documenting your testing environment.

📈

Visual Comparison

See how your screen compares to common device sizes including iPhones, iPads, MacBooks, Full HD, 4K, and 5K displays with a visual bar chart.

Understanding Screen Resolution

Screen resolution describes the number of distinct pixels that can be displayed on a screen, typically expressed as width x height (e.g., 1920 x 1080). It directly affects how much content you can see on screen and how sharp that content appears. Higher resolutions display more content and render text and images more crisply.

Key Display Metrics

Screen Resolution: The total pixel dimensions of your physical display (e.g., 2560 x 1440).
Viewport Size: The visible area of the web page within the browser, excluding browser UI elements like the address bar and tabs.
Device Pixel Ratio (DPR): The ratio of physical pixels to CSS pixels. A DPR of 2 (Retina) means 2x2 physical pixels per CSS pixel.
Color Depth: The number of bits per pixel, determining how many colors can be displayed (24-bit = 16.7 million colors).
Available Screen: Screen area minus system UI elements like the taskbar or dock.

Why It Matters for Developers

Understanding screen resolution and viewport size is essential for responsive web design. Developers use these metrics to create CSS media queries, optimize images for different pixel densities, test layouts across devices, and ensure accessibility. The device pixel ratio is particularly important for serving high-resolution images on Retina displays without wasting bandwidth on standard displays.

Frequently Asked Questions

What is screen resolution? ▼

Screen resolution is the number of pixels your display can show, expressed as width x height (e.g., 1920 x 1080). Higher resolutions mean more pixels, resulting in sharper images and more screen real estate for content. Common resolutions include Full HD (1920x1080), QHD (2560x1440), and 4K UHD (3840x2160).

What is device pixel ratio? ▼

Device pixel ratio (DPR) is the ratio between physical pixels and CSS pixels. A DPR of 1 means one physical pixel per CSS pixel (standard displays). A DPR of 2 (Apple Retina) means 4 physical pixels (2x2) per CSS pixel, creating sharper text and images. A DPR of 3 is common on high-end smartphones.

Why is viewport size different from screen resolution? ▼

Screen resolution is the total pixel count of your physical display, while viewport size is the visible content area within your browser window. The viewport is smaller because it excludes the browser's address bar, tabs, bookmarks bar, and any operating system elements like the taskbar or dock.

Do the values update in real-time? ▼

Yes, viewport size and browser window dimensions update in real-time as you resize your browser window. Screen resolution remains constant since it reflects your physical display hardware. Orientation also updates when you rotate a mobile device.

Is any data collected? ▼

No, all detection happens entirely in your browser using standard JavaScript APIs (window.screen, window.innerWidth, navigator properties). No data is sent to any server, stored, or logged. Everything runs client-side.

What is color depth? ▼

Color depth (or bit depth) indicates how many bits are used to represent the color of each pixel. 24-bit color depth provides 16.7 million colors (8 bits for red, green, and blue). 32-bit adds an 8-bit alpha channel for transparency. Most modern displays use 24-bit or 32-bit color depth.

Explore More Tools

Check out our other free online tools for developers -- all from your browser with no sign-up required.

Color Converter →

Screen Resolution Checker Live