Preview: emulate device aspect ratios / viewport presets (iPhone, iPad, landscape/portrait)

Resolved 💬 3 comments Opened May 10, 2026 by mozltovcoktail Closed May 13, 2026

Summary

mcp__Claude_Preview__preview_resize accepts arbitrary width/height, but there's no built-in way to emulate common device viewports or simply force a portrait vs. landscape aspect ratio. Add device/aspect-ratio presets to the preview so testing responsive UI doesn't require remembering exact pixel dimensions or a separate browser devtools session.

Requested behavior

Aspect-ratio presets:

  • portrait (e.g. 9:16, 9:19.5, 9:20)
  • landscape (e.g. 16:9, 19.5:9)
  • square (1:1)
  • tablet-portrait (3:4)
  • tablet-landscape (4:3)

Device presets (with correct CSS pixel size + DPR + user agent):

  • iPhone SE, iPhone 15, iPhone 15 Pro Max
  • iPad mini, iPad Pro 11\", iPad Pro 13\"
  • Pixel 8, Pixel 8 Pro
  • Galaxy S24, Galaxy S24 Ultra
  • Common desktop sizes: 1280x800, 1440x900, 1920x1080, 2560x1440

Orientation toggle:

  • Swap width/height on the current preset without picking a new one.

Suggested API

Extend preview_resize (or add preview_emulate):

\\\
preview_resize({ device: \"iphone-15-pro\" })
preview_resize({ device: \"ipad-pro-13\", orientation: \"landscape\" })
preview_resize({ aspectRatio: \"portrait\" }) // picks a sensible default size
preview_resize({ aspectRatio: \"16:9\", width: 1280 }) // height inferred
\
\\

Ideally the preset also sets:

  • devicePixelRatio to match the real device
  • navigator.userAgent (for UA-sniffing code paths)
  • Touch event emulation flag

Why

  • Responsive bug-hunting: many layout issues only appear at specific device sizes. Today the agent has to guess pixel dimensions or skip the check.
  • Consistency: every reviewer/agent emulating \"an iPhone\" should get the same viewport, DPR, and UA.
  • Speed: \"flip to landscape and re-screenshot\" is a one-call operation instead of \"what was the width again?\"
  • Parity: Chrome DevTools, Safari Responsive Design Mode, and Playwright all ship device presets — the preview tool should too.

Environment

  • Claude Code preview MCP (mcp__Claude_Preview__preview_*)

View original on GitHub ↗

This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗