Skip to main content
← Back to Tutorials

Multi-Viewport Scanning

Scan the same page at mobile, tablet, and desktop widths to catch responsive-only issues.

Open Demo PageFollow along on the demo page while watching the video

Video coming soon

Follow the written steps below in the meantime

Step-by-Step Instructions

  1. 1
    Open the Multi-Viewport demo.
  2. 2
    In the side panel, select the Multi-Viewport preset card.
  3. 3
    Click Start Scan — the browser window resizes to 375px, 768px, and 1280px sequentially.
  4. 4
    At each width, axe-core runs a full scan.
  5. 5
    Results show: violations found at ALL viewports vs. viewport-specific issues.
  6. 6
    Viewport-specific violations only appear at certain widths — these are responsive bugs (e.g., a hamburger menu missing a label at mobile only).
  7. 7
    The demo page has different violations at each width: mobile (unlabeled hamburger), tablet (low contrast sidebar), desktop (div with onclick but no keyboard access), plus shared violations (missing form label, missing image alt).
← All Tutorials