Viewport Size Detector
Every value below updates live as you resize the browser window, rotate the device, or change the zoom level.
VIEWPORT (CSS PIXELS)
—
—
—
Screen width
—
CSS pixels
Screen height
—
CSS pixels
Device pixel ratio
—
physical pixels per CSS pixel
Orientation
—
—
Bootstrap breakpoints
| Label | Range | Min-width | Max-width | Status |
|---|
CSS media queries for your current viewport
These snippets are generated from your live viewport width. Press a button to copy.
Copied to clipboard.
How to use
- Open this page on any device and resize the window — all values update in real time.
- Check the highlighted row in the breakpoint table to see which Bootstrap breakpoint is active.
- Press a Copy button to grab a CSS media query that matches your current viewport.
FAQs
The screen size is the full display of the device. The viewport is the visible area of the browser window, which shrinks when you open side panels or resize the window. Web pages respond to the viewport, not the screen.
Device pixel ratio is the number of physical screen pixels used to draw one CSS pixel. A ratio of 2 means images look sharp on high-density displays because twice the detail is packed into the same CSS size.
No. All measurements happen locally in your browser with JavaScript and nothing is sent to any server.