Browser Viewport Tester

CSS viewport: —
Device-pixel ratio: —
Orientation: —
Width band: —

Check this page's usable browser viewport

Select Read current viewport after resizing or rotating the window. The custom preview draws a proportional box for entered dimensions; it does not load or emulate another website.

Viewport versus physical screen

The CSS viewport is the layout space available to the web page, measured in CSS pixels. It can be smaller than the monitor or phone screen because browser chrome, side panels, window size, zoom, and operating-system UI consume space. Physical device pixels are a different measurement.

Device-pixel ratio

Device-pixel ratio compares device pixels with CSS pixels in the current environment. A value of 2 often means two device pixels across correspond to one CSS pixel across, but zoom and platform behavior can affect the reported value. It is not a reliable device model identifier.

Worked example

A browser reports 375 × 667 CSS pixels with device-pixel ratio 2. A responsive page lays itself out against the 375-pixel CSS width, while a screenshot may contain more physical pixels. Entering 375 and 667 in the preview produces a half-scale box labeled with those original dimensions.

Width bands are descriptive

The displayed compact, small, medium, large, and extra-large bands are convenient descriptions used by this page. They are not universal device categories or promises about a site's breakpoints. Good responsive layouts adapt to content and available space instead of targeting a short list of named phones.

What the preview can reveal

The proportional box helps compare aspect ratios and relative dimensions. It does not render your site inside that viewport. Use browser developer tools or automated browser tests to inspect actual layout, keyboard behavior, touch targets, overflow, reduced motion, text scaling, and accessibility at specific sizes.

Limitations and privacy

This tool reads browser-exposed dimensions locally. It does not detect safe-area insets, browser chrome, foldable segments, color capabilities, physical inches, user agent, input method, or another tab. The preview does not emulate network, CPU, operating system, browser engine, permissions, or device features.

Viewport Tester FAQ

Why does width change when I zoom?

Browser zoom can change the relationship between the window and CSS layout pixels.

Is viewport size the same as screen resolution?

No. Screen resolution describes a display; viewport size describes page layout space.

Can this test my website?

It reports and previews dimensions only; use developer tools or Playwright for actual page testing.