Viewport & Screen Info
Real-time viewport and screen information for responsive design testing
Monitor viewport dimensions, screen resolution, device pixel ratio, and window properties in real-time. Essential for testing responsive breakpoints and debugging layout issues.
Viewport & Window
- Viewport Size
- 0 x 0
- window.innerWidth x innerHeight
- Outer Window Size
- 0 x 0
- window.outerWidth x outerHeight
- Device Pixel Ratio
- 1
- window.devicePixelRatio
Screen
- Screen Size
- 0 x 0
- screen.width x height
- Available Layout
- 0 x 0
- screen.availWidth x availHeight
- Color Depth
- 24-bit
- screen.colorDepth
- Orientation
- landscape
- screen.orientation
About Viewport & Screen Info
Viewport & Screen Info provides real-time monitoring of your browser environment for responsive design testing and development. Essential metrics include:
- Viewport Dimensions: Live
window.innerWidthandwindow.innerHeightvalues that update as you resize. Critical for testing CSS media queries and responsive breakpoints. - Browser Window Size: Full window dimensions including chrome, toolbars, and scrollbars (
window.outerWidthxwindow.outerHeight). - Screen Resolution: Physical display dimensions showing total pixels available (
screen.widthxscreen.height). - Available Screen Space: Usable screen area excluding system UI like taskbars and docks (
screen.availWidthxscreen.availHeight). - Device Pixel Ratio: The DPR shows the relationship between physical and CSS pixels, crucial for Retina/high-DPI display optimization (typical values: 1 for standard, 2+ for high-DPI).
- Color Depth: Bit depth of the display's color palette (typically 24 or 32 bits).
- Screen Orientation: Current orientation state (landscape-primary, portrait-primary, etc.).
Why Use This Tool?
Responsive web design requires precise understanding of viewport behavior across different screen sizes. This tool helps you:
- Test Breakpoints: See exactly when your CSS media queries trigger as you resize the browser
- Debug Layout Issues: Identify viewport-specific problems with pixel-perfect accuracy
- Verify DPR Handling: Ensure high-resolution images and graphics display correctly on Retina displays
- Cross-Device Testing: Compare viewport metrics across different devices and browsers
- Document Specifications: Capture exact viewport dimensions for bug reports and design documentation
How to Use
Simply open this page and the metrics will display automatically. All values update in real-time as you:
- Resize your browser window
- Rotate your device (mobile/tablet)
- Change zoom levels
- Switch displays or screens
No interaction required—just watch the numbers change as your viewport changes.