Skip to content
QuicklyTools

Viewport Size Checker

See your browser viewport width and height live as you resize, plus visual viewport, scrollbar width and breakpoint.

Runs in your browser
Loading tool…

About the Viewport Size Checker

Responsive layouts depend on the viewport — the visible area of the page — not the screen size. Resize your window and watch the values update live, including the visual viewport (affected by pinch-zoom and on-screen keyboards), scrollbar width and the matching Tailwind CSS breakpoint.

How to use it

  1. Open the page.
  2. Resize the window or rotate your device.
  3. Read the live values.

Good to know

  • On mobile, the viewport height changes as the address bar shows and hides; CSS units dvh/svh/lvh address this.

Frequently asked questions

innerWidth vs clientWidth?

innerWidth includes the vertical scrollbar; documentElement.clientWidth excludes it and matches media queries in most browsers.

Why is my phone's viewport 390 px?

Phones report CSS pixels; a 1170 px-wide screen at 3× density equals 390 CSS px.

Related tools

Screen Resolution CheckerDevice Pixel Ratio CheckerCSS Unit ConverterPX to REM Converter

More browser & privacy →