Viewport Size Checker

Check your current viewport size and understand CSS viewport units.

Width (vw)

0px

1vw = 0.00px

Height (vh)

0px

1vh = 0.00px

CSS Viewport Units

1vw = 1% of viewport width = 0.00px

1vh = 1% of viewport height = 0.00px

1vmin = 1% of smaller dimension = 0.00px

1vmax = 1% of larger dimension = 0.00px

CSS Viewport Units Explained

Viewport units are CSS length units relative to the browser viewport dimensions. They enable truly responsive sizing without media queries. Understanding how these units translate to pixels helps create flexible, viewport-aware designs.

This tool calculates the exact pixel value of viewport units based on your current browser size, helping you understand how vh, vw, vmin, and vmax work in practice.

VW (Viewport Width)

1vw equals 1% of the viewport width. Use vw for elements that should scale with browser width. Common use: responsive typography that grows on larger screens.

VH (Viewport Height)

1vh equals 1% of the viewport height. Use vh for full-screen sections (100vh), though be aware of mobile browser issues where the address bar affects vh calculations.

VMIN and VMAX

Vmin uses the smaller of vw or vh; vmax uses the larger. These are useful for maintaining proportions regardless of orientation. Vmin ensures elements fit within the viewport.

Mobile VH Issues

On mobile, 100vh may extend behind the browser's address bar, causing scrolling issues. Use CSS custom properties with JavaScript or the new dvh/svh units for more reliable full-height layouts.