Viewport Debugger
Live read-out of viewport size, visualViewport, safe-area insets, and DPR
Live read-out of viewport size, visualViewport, safe-area insets, and DPR
A live read-out of every viewport-related value the browser exposes. Resize the window or rotate your device — the panel updates in real time. There's nothing to configure; this is purely observational.
The CSS viewport — what vw/vh and media queries see. innerWidth includes the scrollbar; clientWidthdoesn't. The difference matters when you're measuring content area for layout math.
The portion of the layout viewport actually visible. On mobile this shrinks when the on-screen keyboard appears or when the user pinch-zooms. Use window.visualViewport to position floating UI that needs to dodge the keyboard.
The pixel margins of any device chrome (notch, home indicator, rounded corners). Always 0 on desktop browsers. On iOS Safari you need viewport-fit=cover in your meta tag for these to be non-zero.
The ratio of physical pixels to CSS pixels. 1 on standard displays, 2 on most retina screens, 3 on flagship phones. Use it to pick the right @2x asset or to size a <canvas> backing store.
The web platform exposes three different viewports, and mixing them up is one of the most common sources of mobile layout bugs. The layout viewportis the box your CSS measures from — it's what 100vw resolves to and what @media (min-width: 768px) tests against. The visual viewport is the actual visible region inside that layout viewport, which can be smaller when the user pinch-zooms or when the on-screen keyboard pushes up from the bottom. The ideal viewport is what your <meta name="viewport"> tag requests.
Before window.visualViewport existed, there was no way for JS to know how much room the soft keyboard ate. Floating buttons would disappear under the keyboard and chat inputs would jump around. The visualViewport API solves this — listen to its resize event and reposition any sticky UI relative to visualViewport.height instead of window.innerHeight.
By default iOS Safari pads the viewport so your content never touches the rounded corners or notch. That's safe but wasteful for full-bleed designs. Setting viewport-fit=coverin the viewport meta tag lets your background extend edge-to-edge, and you're responsible for padding important content away from the chrome using env(safe-area-inset-top) etc. The env() function only resolves to non-zero values when viewport-fit=cover is set.