Viewport & Screen Info

How to use Viewport Info

Open the page on any device and you get a live readout of how the web sees that screen. Resize your browser window, open dev tools, or rotate a phone — every tile, the breakpoint chip, and the ruler update instantly.

1. Read the tiles. Viewport, screen resolution, pixel ratio, orientation, color depth, touch support, and your OS's color-scheme and motion preferences.
2. Check the breakpoint. See which CSS breakpoint your current width falls into — handy when debugging responsive layouts.
3. Use the ruler to eyeball exact pixel widths across the viewport.
4. Copy all as text to paste the full report into a bug ticket or a message to your developer.

Why developers care about the viewport

Responsive design is built on the viewport, not the screen: a 1920 px monitor with dev tools docked may only offer 1200 px to the page, and a phone's "logical" width (390 px) is a fraction of its physical pixels. The breakpoint chip shows which set of your site's media-query rules is active right now, and devicePixelRatio explains why screenshots look "bigger" than the CSS says.

What is the difference between viewport size and screen size?

Screen size is your whole display's resolution in physical pixels. Viewport size is the part of the page actually visible in the browser — smaller when dev tools, sidebars, or a phone's browser chrome take up space. CSS media queries respond to the viewport, not the screen.

What does devicePixelRatio mean?

It's the ratio of physical screen pixels to CSS pixels. A devicePixelRatio of 2 (a typical 'Retina' phone) means each CSS pixel is drawn with 2×2 physical pixels, so you multiply CSS dimensions by it to get the real rendered resolution.

Why does the viewport size change when I rotate my phone?

Rotating swaps the width and height available to the page, and the browser chrome may also resize. This tool listens for resize and orientation events and updates every number live, so you can watch it happen.

What are CSS breakpoints?

Widths where a responsive site changes its layout — commonly 576px, 768px, 992px, and 1200px. This page highlights the breakpoint your current viewport falls into, so you can see exactly which layout rules apply to you right now.

What do prefers-color-scheme and prefers-reduced-motion tell me?

They report the visitor's system settings: whether the OS is in light or dark mode, and whether the user asked to minimize animation. Sites use them to adapt their theme and motion automatically.

Is any of my data sent anywhere?

No. Every number on this page is read directly from your browser's own APIs and displayed on your device. Nothing is uploaded, stored, or tracked — even the Copy button just puts the text on your clipboard.