Preview: emulate device aspect ratios / viewport presets (iPhone, iPad, landscape/portrait)
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:
devicePixelRatioto match the real devicenavigator.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_*)
This issue has 3 comments on GitHub. Read the full discussion on GitHub ↗