Viewport size is the visible area of a web page within the browser window. It's measured using window.innerWidth and window.innerHeight in pixels. This is the actual space available for displaying web content, excluding browser chrome (toolbars, bookmarks bar, etc.). It's crucial for responsive web design because it determines how your layout should adapt.

Screen resolution (screen.width × screen.height) is the total number of physical pixels on your display. Viewport size is the browser's content area, which is almost always smaller due to browser UI elements, taskbars, and the fact that browser windows are rarely maximized. For example, a 1920×1080 screen may have a viewport of only ~1440×780 when the browser is not fullscreen.

Device Pixel Ratio (DPR) is the ratio between physical pixels and CSS pixels. A DPR of 2 means 2×2 physical pixels are used to display one CSS pixel, resulting in sharper text and images on high-DPI screens (Retina displays). Most modern smartphones have DPR of 2× or 3×. DPR is exposed via window.devicePixelRatio. This is critical for serving appropriately sized images (using srcset) and for canvas rendering.

This tool automatically detects and displays your screen resolution (physical pixels), viewport size, DPR, and more in real-time. Just open this page and you'll see all the information instantly. You can also check manually: right-click on your desktop → Display Settings (Windows) or System Preferences → Displays (Mac) to see your screen's native resolution. On mobile, check Settings → Display → Screen Resolution.

Several factors reduce viewport size compared to screen resolution: (1) Browser UI elements like tabs, address bar, and bookmarks take up space, (2) Operating system taskbars/docks consume screen real estate, (3) The browser window may not be maximized, (4) On mobile, the on-screen keyboard and browser chrome reduce available height, (5) Scrollbars (typically 15-17px wide) occupy viewport space. This is why designers test at various viewport sizes rather than relying on screen resolution alone.

Standard responsive breakpoints include: 320px (small phones), 375-414px (modern smartphones), 576px (large phones landscape), 768px (tablets), 992px (small laptops), 1024px (tablets landscape / small desktops), 1200px (standard desktops), and 1400px+ (large displays). Bootstrap 5 uses 576px, 768px, 992px, 1200px, and 1400px as its breakpoints. Always design mobile-first and progressively enhance for larger viewports.

Simply open this page and the tool automatically detects your viewport size, screen resolution, DPR, color depth, orientation, and more — all in real-time. Resize your browser window to see the values update instantly. Click "Copy Report" to copy all detected information to your clipboard. Use the device breakpoint table to see which category your current viewport falls into. No installation required — it works entirely in your browser.

window.innerWidth returns the CSS pixel width of the browser's content area (the viewport), including scrollbars. screen.width returns the total physical pixel width of the entire screen. On a 1920×1080 monitor, screen.width is 1920, but window.innerWidth might be around 1440-1900 depending on browser window size. On Retina displays, screen.width reports CSS pixels (not physical), so a 3024-pixel-wide MacBook screen reports 1512.

DPR directly impacts image quality and layout precision. On a 3× DPR screen, a 100×100 CSS pixel image needs to be at least 300×300 physical pixels to look sharp. Use srcset with 2x and 3x descriptors for responsive images. For canvas, multiply dimensions by DPR for sharp rendering. For icons, use SVG or icon fonts which scale perfectly at any DPR. CSS media queries like @media (-webkit-min-device-pixel-ratio: 2) can target high-DPI screens specifically.

Your aspect ratio is the proportional relationship between width and height (e.g., 16:9, 4:3, 21:9). It matters because content looks different across ratios — a video optimized for 16:9 will have black bars on a 21:9 ultrawide monitor. Web designers use aspect ratio to ensure hero images, video embeds, and layout grids look consistent. CSS aspect-ratio property helps maintain proportions. Common ratios: 16:9 (most screens), 16:10 (MacBooks), 4:3 (iPads), 21:9 (ultrawide), 19.5:9 (modern phones).