Check your browser's active viewport dimensions (window.innerWidth, window.innerHeight) and outer window geometry (window.outerWidth, window.outerHeight) in real time with BunchTool's free Window Size Checker. Features live event-driven resize updates and a scaled visual blueprint container.
innerWidth × innerHeight)outerWidth × outerHeight)The page automatically queries your browser's inner viewport and outer window dimensions upon loading.
Drag your browser window borders or open developer tools to see dimensions update live with window resize events.
Compare inner CSS viewport pixels against total outer window dimensions and inspect the proportional blueprint box.
Listens to browser resize events natively, re-calculating dimensions and updating the UI instantly without manual refreshes.
Separates content viewport bounds (CSS layout pixels) from outer window geometry (browser chrome, title bars, and scrollbars).
All dimension calculations run locally in browser JavaScript. No layout metrics or window bounds are sent to external servers.
window.innerWidth / innerHeight) measures the active content viewport where web pages are rendered. Outer size (window.outerWidth / outerHeight) includes browser chrome such as title bars, tab rows, address bars, scrollbars, and window borders.innerWidth / innerHeight) because each CSS pixel represents more physical screen pixels. Zooming out increases the reported CSS pixel viewport width and height.@media (max-width: 768px)) evaluate against innerWidth and innerHeight. Knowing exact viewport dimensions helps developers debug responsive breakpoints and layout overflow bugs.window resize event listener, recalculating inner/outer dimensions and updating the visual blueprint ratio instantly as you drag the window boundaries.
Inner vs Outer Window Geometry: In web development, window.innerWidth and window.innerHeight represent the dimensions of the layout viewport — the rectangular area available for HTML rendering. In contrast, window.outerWidth and window.outerHeight include all browser interface elements (tabs, URL bar, sidebars, scrollbars, and window frame borders).
CSS Pixels vs Physical Pixels: Viewport measurements in JavaScript return CSS logical pixels rather than physical screen hardware pixels. On high-DPI displays (such as Retina screens with devicePixelRatio = 2), a viewport of 1920×1080 CSS pixels corresponds to 3840×2160 physical hardware pixels.
Responsive Breakpoint Auditing: Front-end frameworks like Tailwind CSS or Bootstrap rely on specific viewport width thresholds (e.g., 640px `sm`, 768px `md`, 1024px `lg`, 1280px `xl`). Monitoring live innerWidth values allows developers to accurately test media query trigger points.