[BUG] Preview panel: add device scale factor / zoom support

Preflight Checklist

• [x] I have searched existing issues and this hasn't been reported yet
• [x] This is a single bug report (please file separate reports for different bugs)
• [x] I am using the latest version of Claude Code

What's Wrong?

The Claude Code Desktop preview panel renders at 1:1 CSS pixels with no device scale factor option. iPhone viewports like 390x844 (iPhone 16e) or 440x956 (iPhone 17 Pro Max) overflow the preview panel, even though the physical phone screen would fit within the panel at the correct DPR scaling.

What Should Happen?

The preview panel should support a device pixel ratio / zoom setting (like Chrome DevTools' DPR option) so that larger mobile viewports can be scaled down to fit the panel. For example, a 440x956 viewport at 0.5x scale would display at ~220x478 monitor pixels while still rendering at the correct CSS resolution.

Error Messages/Logs

Steps to Reproduce

Start a dev server with preview_start
Set viewport to iPhone 16e (390x844) or iPhone 17 Pro Max (440x956) with preview_resize
Observe the bottom of the page is cropped/cut off in the preview panel
iPhone SE (375x667) fits, but no modern iPhone viewport does

Claude Model

Opus

Is this a regression?

I don't know

Last Working Version

_No response_

Claude Code Version

Claude 1.1.5368 (d12d02) 2026-03-05T17:29:33.000Z

Platform

Anthropic API

Operating System

macOS

Terminal/Shell

Other

Additional Information

Workaround: using iPhone SE (375x667) viewport for preview, and opening localhost:5173 in a real browser for full-size testing. CSS zoom (document.documentElement.style.zoom) partially works but the screenshot capture still uses the full viewport dimensions.