Viewport Size Detector

This tool reads your browser's live viewport properties using standard JavaScript APIs and updates them in real time as you resize your window.

What Is the Viewport?

The viewport is the visible area of a web page in your browser, excluding toolbars, address bars, and scrollbars. It determines how content is laid out on screen and is the basis for CSS media queries and responsive design.

Viewport vs Screen Size

Your screen size (screen.width / screen.height) is the total resolution of your monitor. The viewport (window.innerWidth / window.innerHeight) is the portion of the screen actually used to display the page. The viewport is always smaller than or equal to the screen size because browser chrome (toolbars, tabs) takes up space.

Device Pixel Ratio (DPR)

DPR is the ratio between physical pixels and CSS pixels. A DPR of 2 means each CSS pixel is rendered with 2×2 physical pixels. High-DPI (Retina) displays have a DPR of 2 or higher, which makes text and images appear sharper.

Bootstrap 5 Breakpoints

You can embed this util on your own site as a widget. Adding ?embed=1 to the URL loads a compact version with just the tool itself; no header, menu, or documentation. Paste this snippet into your HTML:

Copy snippet Adjust the height to taste.