Skip to content

Viewport Debugger

A comprehensive debugging tool to help you understand and debug viewport behavior, especially useful for mobile web development and responsive design testing.

How to Use

Real-time Monitoring

The viewport debugger automatically updates metrics when major changes are detected every 100ms.

Testing Input Behavior

  1. Select an input type from the radio buttons
  2. Tap/click the input field to focus it
  3. On mobile devices, observe how the on-screen keyboard affects:
    • Window dimensions
    • Visual Viewport dimensions
    • Available screen space
    • Safe area insets

Use Cases

Mobile Development

  • 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

Responsive Design

  • Breakpoint Testing: Verify exact viewport dimensions at breakpoints
  • Scroll Debugging: Track scroll position for parallax effects
  • Device Detection: Understand device capabilities for progressive enhancement

Bug Investigation

  • Layout Issues: Diagnose viewport-related layout problems
  • iOS Safari: Debug Safari’s unique viewport behavior
  • PWA Testing: Verify viewport in standalone mode

Performance Optimization

  • 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

Technical Notes

Visual Viewport vs Layout Viewport

  • 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

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.

Learn More

References