viewport vs screen resolution

Viewport vs screen resolution

Compare the actual page area with reported screen resolution for responsive decisions.

Viewport in CSS pixels—

CSS screen—

Physical viewport—

Estimated physical screen—

DPR—

Available area—

Orientation—

Aspect ratio—

Color—

Measurements are read locally through browser APIs and do not uniquely identify your screen.

Continue in the tool

Open full tool

More pages for this tool

How to interpret it

CSS breakpoints respond to the viewport, not the physical monitor size. Responsive design should prioritize viewport.

Quick example

Lookup

Input: Monitor 1920 × 1080, janela 1200 × 800
Expected output: Viewport 1200 × 800

Use the result as technical reference and confirm official sources when there is operational impact.

Check

Input: viewport vs resolução tela
Expected output: viewport vs screen resolution

The main tool remains interactive; this page organizes the search intent.

Full tool FAQ

What is a viewport?

The viewport is the visible area of the page in the browser, measured in CSS pixels. It changes when resizing the window, opening sidebars, changing zoom or rotating the device.

What is devicePixelRatio?

Why is physical resolution estimated?

Is screen width the same as monitor size?

What is the difference between screen and available area?

Why does this matter for responsive design?

Does orientation come from the device or the window?

Does this tool do fingerprinting?

Frequently asked questions

Which value matters for media queries?

CSS breakpoints respond to the viewport, not the physical monitor size. Responsive design should prioritize viewport.

Does the tool work locally?

Yes. The main interface runs in the browser and avoids uploading sensitive data when the feature depends on local hardware.