Viewport Size Checker
Instantly see your browser viewport dimensions — width, height, CSS pixel ratio, and effective resolution. Live-updating data helps you understand how your browser size maps to responsive breakpoints.
Responsive Breakpoint Classification
Based on your current viewport width, here is how it maps to common CSS responsive breakpoint categories.
Visual Viewport Width Reference
The bar below represents your current viewport width relative to common device widths.
Understanding Your Viewport
What is browser viewport size?
The viewport is the visible area of your web page inside the browser window. It excludes toolbars, scrollbars, the address bar, and the browser chrome. The viewport is measured in CSS pixels — logical pixels that may differ from your screen's physical pixels depending on your OS scaling level and device pixel ratio (DPR). The values shown above come directly from window.innerWidth and window.innerHeight, which are the authoritative JavaScript APIs.
Viewport vs Screen Resolution
Screen resolution is the total number of physical pixels your display has (e.g., 1920 × 1080). This is a fixed hardware characteristic of your monitor. Viewport size is the browser content area, which is almost always smaller than the screen resolution because the browser window is rarely maximized to fill the entire screen, and even when it is, the browser chrome (address bar, tabs, scrollbars) reduces the available space. The effective resolution shown above (viewport × DPR) gives you the actual number of device pixels the browser is rendering into.
Why viewport size matters for responsive design
Responsive web design uses CSS media queries that detect the viewport width to apply different layouts. For example, a @media (max-width: 768px) rule might switch from a multi-column desktop layout to a single-column mobile layout. Understanding your viewport helps you test these breakpoints during development. Tools like Chrome DevTools device emulation let you simulate specific viewport sizes, but testing on real devices at actual viewport dimensions is the gold standard.
How to check viewport size in Chrome DevTools
Open Chrome DevTools by pressing F12 or Ctrl+Shift+I (Windows/Linux) or Cmd+Option+I (Mac). The viewport size is displayed in the top-right of the browser window when DevTools is open, or you can enable the Device Toolbar (Ctrl+Shift+M) to see the viewport dimensions displayed prominently at the top. This tool shows you the same window.innerWidth value that CSS media queries use.
Common Responsive Breakpoints
Here is how your current viewport width relates to standard CSS breakpoints used in modern frameworks:
- Mobile: 320px – 480px — Phones in portrait orientation
- Tablet: 481px – 768px — Larger phones and tablets in portrait
- Small Desktop / Laptop: 769px – 1024px — Tablets in landscape, small laptops
- Desktop: 1025px – 1440px — Standard desktop monitors
- Wide: 1441px+ — Ultra-wide, 2K, 4K, and multi-monitor setups
The badge and highlighted range above update in real time as you resize your browser window, giving you immediate feedback on which breakpoint category your current viewport belongs to.
Frequently Asked Questions
What is browser viewport size?
The viewport is the visible area of your web page inside the browser window, excluding toolbars, scrollbars, and the address bar. It is measured in CSS pixels and is the primary dimension used by CSS media queries for responsive design. The viewport size changes when you resize the browser window, zoom in/out, or rotate your device.
What is the difference between viewport and screen resolution?
Screen resolution is the total pixel count of your physical display — a fixed hardware property. Viewport is the browser's content area, which is usually smaller due to browser chrome and window framing. For example, a 1920×1080 monitor may have a viewport of only 1536×754 when the browser is maximized, because the address bar, tab bar, and taskbar consume space. Additionally, OS scaling (e.g., 150% on a 4K display) means the viewport is reported in CSS pixels, which are larger than physical pixels.
Why is viewport size important for web design?
Responsive design uses viewport dimensions to apply CSS media queries for different screen sizes. A @media (max-width: 768px) rule triggers when the viewport is 768 CSS pixels or narrower. If you design your site based on screen resolution rather than viewport size, your layouts will not match the actual user experience — because the viewport is always smaller than the screen. Accurate viewport measurement ensures your breakpoints trigger at the correct sizes.
How do I check viewport size in Chrome DevTools?
Open DevTools (F12), and the current viewport size is displayed in the top-right of the page or in the Elements panel. You can also click the Device Toolbar icon (Ctrl+Shift+M) to enter responsive mode, where you can drag the handles to test any viewport size and see the exact dimensions at the top of the viewport. Chrome also shows the viewport dimensions in the Console when you type window.innerWidth.