Question 1

What is the difference between Screen Resolution and Viewport Size?

Accepted Answer

Screen Resolution is the total pixel dimensions of your monitor as reported by the operating system - for example 1920 × 1080. Viewport Size is the actual area of your browser window that displays page content, excluding toolbars, scrollbars, and the browser chrome. The viewport is always smaller than or equal to the screen resolution. CSS layouts and media queries respond to the viewport, not the screen resolution.

Question 2

What is Device Pixel Ratio (DPR) and why does it matter?

Accepted Answer

Device Pixel Ratio (DPR) is the ratio between physical hardware pixels and logical CSS pixels. A DPR of 2 (Retina) means every CSS pixel is drawn using a 2×2 block of physical pixels, producing sharper text and images. A standard 1080p display has a DPR of 1; Apple Retina displays are typically DPR 2 or 3; many Android phones use 2.5× or 3×. DPR matters for web development because images, canvas elements, and SVGs need to account for it to avoid appearing blurry on high-density screens.

Question 3

What does Physical Pixels mean?

Accepted Answer

Physical Pixels is the actual hardware pixel count of your screen - calculated as Screen Resolution × Device Pixel Ratio. For example, a 1920 × 1080 screen with DPR 2 has 3840 × 2160 physical pixels. This is the true resolution your display hardware renders at. CSS and JavaScript work in logical pixels, so a 1920 × 1080 screen at DPR 2 still behaves as 1920 × 1080 in code.

Question 4

What does Available Screen mean?

Accepted Answer

Available Screen shows the portion of your display that is actually usable for application windows - your total screen size minus any persistent UI elements like the Windows taskbar, macOS Dock, or Android navigation bar. For example, a 1920 × 1080 screen with a 40px taskbar would show an available height of 1040px. This is the maximum size a browser window can occupy without overlapping system UI.

Question 5

What are CSS Breakpoints and why are they shown?

Accepted Answer

CSS Breakpoints are the viewport width thresholds where a responsive design changes layout. The tool shows Tailwind CSS breakpoints: sm (≥640px), md (≥768px), lg (≥1024px), xl (≥1280px), and 2xl (≥1536px). Active breakpoints are highlighted in purple. This is useful for developers testing which responsive layout will apply at the current window size, and for QA testers verifying that designs adapt correctly as the window is resized.

Question 6

Why does my screen resolution look lower than I expected?

Accepted Answer

On modern HiDPI and Retina displays, the OS applies display scaling - for example, a 3840 × 2160 (4K) screen set to 200% scaling appears as 1920 × 1080 in CSS pixels. This is intentional - it makes text and UI elements readable at normal sizes. The tool shows both the logical CSS resolution (what the OS reports) and the physical hardware resolution (the true pixel count). Check the Physical Pixels and Device Pixel Ratio cards to see the underlying hardware resolution.

Question 7

Does the tool update live when I resize the browser?

Accepted Answer

Yes - the tool listens to browser resize and orientation change events and updates all values instantly without any button press. The viewport size and active CSS breakpoints update as you drag the browser window. This is particularly useful for responsive design testing - resize your browser and watch which Tailwind breakpoints activate and deactivate in real time.

Question 8

Is any data sent to a server?

Accepted Answer

No - all display information is read directly from browser APIs (screen, window, window.devicePixelRatio) and computed entirely in your browser using JavaScript. Nothing is transmitted to any server. Your screen details are never stored or logged.

My Screen Resolution

How to Use

Features

Frequently Asked Questions

/ related tools

Community Feedback

Reviews

Rate & Review

/ share this tool