Window Size Detector - Online Outer & Inner Dimensions

Inner dimensions (window.innerWidth / window.innerHeight) represent the viewport — the actual content area of the browser where your web page renders. Outer dimensions (window.outerWidth / window.outerHeight) include the entire browser window, encompassing toolbars, tab bars, address bar, bookmarks bar, and window borders. On mobile browsers, inner and outer values are often identical since mobile browsers typically run in full-screen mode without additional window chrome.

screen.width / screen.height return the full resolution of the user's monitor in physical pixels. screen.availWidth / screen.availHeight return the screen space actually available to browser windows — this excludes permanent OS UI elements like the taskbar (Windows), Dock (macOS), or system menu bars. On a 1920×1080 monitor with a 40px taskbar, availHeight would be 1040px. On mobile devices, these values are usually identical since apps occupy the full screen.

Device Pixel Ratio (window.devicePixelRatio) is the ratio between physical pixels on the screen and CSS logical pixels. A DPR of 1 means 1 CSS pixel = 1 physical pixel. A DPR of 2 (common on Retina displays and most modern smartphones) means 1 CSS pixel = 2×2 = 4 physical pixels, enabling sharper text and images. Common values: 1 (standard desktop), 1.25–1.5 (some Windows laptops), 2 (MacBook Retina, iPhone, many Androids), 3 (iPhone 14/15 Pro Max, Samsung Galaxy flagships). Web developers use DPR to serve appropriately sized images via srcset and to adjust canvas rendering for crisp output.

The difference between window.innerWidth and document.documentElement.clientWidth is the scrollbar width. innerWidth includes the vertical scrollbar (typically 12–17px on desktop), while clientWidth excludes it. This is important when calculating available layout space. On macOS with overlay scrollbars or mobile devices, the difference is usually 0. This tool displays the scrollbar width in real-time under "Extra Info."

The Visual Viewport API (window.visualViewport) provides dimensions of the currently visible area, accounting for on-screen keyboards, pinch-zoom, and other mobile-specific factors. When a virtual keyboard appears on mobile, the visual viewport shrinks while the layout viewport (innerHeight) may remain unchanged. This API also reports offsetTop (how far the visual viewport is offset from the layout viewport) and scale (current pinch-zoom level). It's essential for positioning fixed elements like chat input bars or sticky footers correctly on mobile.

CSS viewport units are closely related to JavaScript window dimensions: 1vw = 1% of window.innerWidth, and 1vh = 1% of window.innerHeight. However, on mobile Safari, 100vh can be larger than the visible area because it doesn't account for the address bar. New CSS units like svh (small viewport height), lvh (large viewport height), and dvh (dynamic viewport height) address this. The Visual Viewport API provides the most accurate mobile viewport measurement. Use dvh for elements that need to fill the screen exactly on mobile.

The resize event fires rapidly during window dragging — potentially 60+ times per second. Best practices: 1) Use requestAnimationFrame to throttle updates to the screen refresh rate. 2) Debounce with a 150–300ms delay if you only need the final value. 3) Use ResizeObserver for observing specific elements rather than the whole window. 4) Match media queries with window.matchMedia() for breakpoint-specific logic. This tool uses requestAnimationFrame for smooth, performant real-time updates.

Different browsers report outer dimensions inconsistently. Chrome includes all browser chrome (tabs, bookmarks, toolbars). Firefox may exclude some window decorations. Safari on macOS doesn't always report the unified toolbar area. On mobile browsers, outerWidth/outerHeight often equal innerWidth/innerHeight because mobile browsers lack separate window chrome. Additionally, when a browser window is maximized vs. fullscreen (F11), outer dimensions change significantly. For reliable layout calculations, always use inner dimensions or the Visual Viewport API.