Question 1

What is the difference between screen resolution and viewport size?

Accepted Answer

Screen resolution is the total number of physical pixels your display has (e.g., 1920×1080). Viewport size is the area of the browser window actually available for web content — it changes as you resize the browser, while your screen resolution stays fixed unless you change display settings.

Question 2

What is Device Pixel Ratio (DPR)?

Accepted Answer

Device Pixel Ratio is the ratio between physical pixels and CSS (logical) pixels. A DPR of 2x means your screen uses 4 physical pixels to render each 1 CSS pixel — this is what "Retina" and "HiDPI" displays do. A 1920×1080 screen with 2x DPR has an effective CSS resolution of 960×540.

Question 3

Why does my screen resolution look different from what my OS reports?

Accepted Answer

Operating systems apply display scaling (e.g., 150% or 200% scale on Windows HiDPI screens) which changes the effective pixel count the browser sees. This tool reports both the physical screen size and the CSS viewport size so you can see the exact difference.

Question 4

How is DPI estimated?

Accepted Answer

We estimate DPI by multiplying the standard screen base DPI (96 DPI for most monitors) by the Device Pixel Ratio. For a true DPI reading, you would need to know the physical diagonal size of your screen in inches — which browsers do not expose for privacy reasons.

Question 5

Does this tool send my screen data anywhere?

Accepted Answer

No. Everything runs entirely in your browser using native JavaScript APIs. Nothing is sent to any server, stored in a database, or tracked in any way. Your screen data never leaves your device.

Question 6

Which CSS breakpoints are shown?

Accepted Answer

We show the standard Bootstrap 5 breakpoints (xs, sm, md, lg, xl, xxl) which align closely with Tailwind CSS and most modern frameworks. These are the most widely-used responsive design thresholds in the industry.

Question 7

What is "Available Screen" vs. total resolution?

Accepted Answer

"Available Screen" (screen.availWidth × screen.availHeight) is the total display area minus any OS UI elements like the Windows taskbar, macOS menu bar, or dock. This is the maximum space a maximized window can occupy.

Question 8

Why does my mobile device report different numbers?

Accepted Answer

Mobile browsers often apply viewport meta tag scaling and have high DPR displays. The physical resolution on modern phones can be 3×–4× higher than the CSS viewport they report to browsers. This is intentional — websites are designed at the CSS pixel level, not the physical pixel level.

Know Your
Screen.
Precisely.

Your Screen, Right Now

Device & Browser Intel

Hardware

Browser

Network & System

Responsive Breakpoints

Screen Size Comparison

Everything You Need

Real-Time Detection

Pixel Density

Breakpoint Mapper

Device Fingerprint

Export & Copy

Multi-Device Comparison

How It Works

Browser APIs

Live Calculation

Zero Storage

Common Questions

Ready to Know Your Screen?

Know YourScreen.Precisely.