Viewport (window.innerWidth × innerHeight) is the visible area of a web page within the browser window — the actual canvas available for rendering content. Screen size (screen.width × screen.height) is the full physical resolution of your monitor or device display. The viewport is always smaller than or equal to the screen because the browser's toolbar, tabs, address bar, and OS UI elements consume space. On mobile devices, the viewport changes dynamically when the on-screen keyboard appears or when the user scrolls (causing the address bar to show/hide).

Device Pixel Ratio (window.devicePixelRatio) is the ratio between physical pixels and CSS pixels on a display. A DPR of 2 means 4 physical pixels (2×2) are used to render each CSS pixel, resulting in sharper images and text on high-DPI screens (like Apple Retina displays). Web developers use DPR to serve appropriately sized images (via srcset) and to create crisp graphics on all devices. Most modern smartphones have a DPR of 2 or 3, while standard desktop monitors typically have a DPR of 1.

Bootstrap 5 defines 6 responsive breakpoints based on viewport width: xs (<576px), sm (≥576px), md (≥768px), lg (≥992px), xl (≥1200px), and xxl (≥1400px). These breakpoints control how grid columns stack, when navigation collapses, and how utility classes apply. Use them with class prefixes like col-md-6 (half-width on md+ screens) or d-lg-none (hidden on lg+ screens) to build responsive layouts that adapt seamlessly across devices.

When you open Chrome/Firefox/Edge DevTools as a docked panel (bottom or side), the browser recalculates the available viewport area. The window.innerHeight decreases because DevTools occupies space previously available for page rendering. This tool detects those changes in real time — you'll see the numbers update immediately. Tip: open DevTools in a separate window (undocked mode) to avoid affecting your viewport measurements.

screen.availWidth and screen.availHeight return the screen size minus permanent OS UI elements like the taskbar (Windows), Dock (macOS), or system status bar (mobile). For example, if your monitor is 1920×1080 and the Windows taskbar is 40px tall, availHeight would be 1040px. This is useful for calculating the maximum browser window size a user can achieve, which helps in designing full-screen experiences or popup windows.

Simply resize your browser window and watch the viewport numbers update in real time. The Bootstrap Breakpoint indicator tells you exactly which responsive tier you're currently in. For precise testing, drag your window edges slowly and observe when the breakpoint badge changes (e.g., from lg to md at 992px). You can also use this tool on mobile devices to see how viewport dimensions differ across phones and tablets. Pair it with your browser's DevTools device toolbar for comprehensive responsive testing.