What is the difference between screen size and viewport size?

Screen size is the CSS-pixel size of the display reported by the browser, while viewport size is the actual browser content area your page can render into. Browser chrome, split-screen layouts, and fullscreen mode can make them very different.

Why does device pixel ratio matter?

Device pixel ratio explains how many physical pixels map to one CSS pixel. It affects rendering sharpness, canvas sizing, screenshots, and how the same layout appears across standard and high-density displays.

Can a browser detect zoom perfectly?

Not always. Pinch zoom is often visible through the VisualViewport API, but desktop page zoom is not exposed consistently across browsers. A robust detector should show direct zoom signals and clearly label any browser-dependent limitations.

What are safe-area insets?

Safe-area insets are the padding values browsers expose for notches, rounded corners, and gesture areas. They help apps avoid placing UI under camera cutouts or system gesture bars on mobile devices.

Screen Resolution Detector

Measure screen size, viewport size, DPR, orientation, fullscreen state, zoom-related signals, safe-area insets, and live change events without leaving the browser.

Live Browser Telemetry

Screen, viewport, DPR, zoom signals, and device context in one snapshot

This detector separates screen metrics, browser viewport metrics, and rendered pixel metrics so you can debug responsive bugs without mixing them together.

Screen

CSS pixel dimensions reported by the current display.

Viewport

The browser content area available to your page.

Device Pixel Ratio

Use this with CSS pixels to estimate physical render size.

Orientation

Waiting for browser metrics.

Live Snapshot

These are the high-signal values most teams actually need when debugging breakpoints, render sharpness, zoom behavior, and fullscreen issues.

Screen Metrics

Viewport Metrics

Rendering Metrics

Environment

Compatibility Notes

A robust detector should be explicit about what is measured directly and what remains browser-dependent.

VisualViewport API

Improves zoom and pinch-gesture visibility on supporting browsers.

Screen Orientation API

Used for angle and orientation events when the browser exposes them.

Multi-Screen API

Experimental support for identifying the current screen and display count.

Safe Area Insets

Read from CSS env() so notches and inset-aware layouts can be debugged.

Display Extras

Useful when debugging dock offsets, notches, multi-display setups, or reduced-motion variants.

Raw JSON

Copy a normalized payload for bug reports, QA notes, analytics, or support tickets.

Waiting for initial snapshot.

Loading...

More Intel & Debugging Tools

Responsive Checker

Preview sites across common device widths

Can I Use

Check browser support for frontend APIs

Tech Stack Detector

Inspect what public websites are built with

Proxy Checker

Test proxy status, latency, and location

HTTP Header Analyzer

Inspect security and caching response headers

Meta Tag Extractor

Extract metadata from any public URL

AI Token Counter

Measure prompt size and context fit

Number Base Converter

Inspect bit-level numeric representations

What this detector is measuring

Good screen diagnostics keep three different layers separate: the physical display your operating system exposes, the CSS-pixel screen metrics the browser reports, and the viewport your page can actually render into. Most responsive bugs happen when those layers get treated as if they are the same number.

Screen metrics

Includes raw screen width and height, available screen size, screen origin, and color depth. These help when docks, taskbars, or monitor placement change the usable area.

Viewport metrics

Includes inner viewport, document client size, outer window size, visual viewport, and scrollbar width. This is usually the set you want when debugging breakpoints or clipped layouts.

Render metrics

Includes device pixel ratio and physical render estimates. These help explain why one screen looks soft while another looks crisp even when the viewport CSS pixels are identical.

Why zoom is handled carefully

Browser pinch zoom can often be observed through the VisualViewport API, but desktop page zoom is not exposed consistently across browsers. This tool surfaces the zoom signals the browser can report directly and labels the rest as browser-dependent so the output stays honest.

When this tool is most useful

Responsive QA

Compare reported screen size with actual viewport size to understand why a layout breaks at one breakpoint and not another.

Support tickets

Ask users to copy the JSON payload so engineering gets a normalized view of their screen, viewport, DPR, and feature support in one message.

Multi-display debugging

Experimental APIs can expose whether the desktop is extended and, on supporting browsers, which display the window is currently on.

Mobile safe areas

Safe-area inset reporting helps when notch, gesture bar, and installed-app layouts need different padding than a normal browser tab.