Viewport Debugger
A comprehensive debugging tool to help you understand and debug viewport behavior, especially useful for mobile web development and responsive design testing.
The viewport debugger automatically updates metrics when major changes are detected every 100ms.
- Select an input type from the radio buttons
- Tap/click the input field to focus it
- On mobile devices, observe how the on-screen keyboard affects:
- Window dimensions
- Visual Viewport dimensions
- Available screen space
- Safe area insets
- Keyboard Behavior: Understand how virtual keyboards affect layout
- Safe Areas: Ensure UI elements aren’t obscured by device notches
- Orientation Changes: Test layout transitions between portrait and landscape
- Breakpoint Testing: Verify exact viewport dimensions at breakpoints
- Scroll Debugging: Track scroll position for parallax effects
- Device Detection: Understand device capabilities for progressive enhancement
- Layout Issues: Diagnose viewport-related layout problems
- iOS Safari: Debug Safari’s unique viewport behavior
- PWA Testing: Verify viewport in standalone mode
- Visual Viewport: Optimize for on-screen keyboard appearance
- Resize Events: Understand when and how often resize events fire
- Device Metrics: Tailor experiences based on device capabilities
- Layout Viewport: The full page size where CSS layouts are calculated
- Visual Viewport: The visible portion of the page (what the user sees)
When a mobile keyboard appears, the visual viewport shrinks but the layout viewport stays the same. This tool shows both so you can understand the difference.
Safe area insets are CSS environment variables introduced for devices with non-rectangular displays:
padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);
Use the safe area values from this tool to ensure your UI is properly positioned.