What's my viewport size?
Your browser window's usable area in CSS pixels, measured live — with the responsive breakpoint and device pixel ratio developers actually need.
–– × ––
Resize the window, open dev tools, or rotate your device — the numbers update live.
Viewport FAQ
- What's the difference between viewport size and screen resolution?
- Screen resolution is your whole display; the viewport is just the part of the browser window a web page can draw into. Toolbars, bookmark bars, dev tools, and the window frame all eat into it, which is why the viewport is nearly always smaller than the screen.
- Why do developers care about viewport size?
- Responsive layouts switch designs at viewport-width breakpoints — Tailwind's defaults are sm 640, md 768, lg 1024, xl 1280, and 2xl 1536 CSS pixels. When a layout misbehaves 'on mobile', the first question is which breakpoint bucket the viewport actually lands in.
- Why is my viewport so much smaller than my phone's resolution?
- Phones measure the viewport in CSS pixels, not hardware pixels. A phone with a 1080×2400 panel and a 3× device pixel ratio reports a viewport around 360×800 — each CSS pixel spans a 3×3 block of physical ones. That's the device pixel ratio shown below the main readout.