Device Mockups

Device frames that match the capture

iPhone 16 Pro, MacBook Pro 16-inch, iPad Pro M4, and browser chrome frames. Pick a device and ScreenFramed captures the page with matching viewport, DPR, user agent, and touch emulation before compositing it into the screen region.

All devices

  • iPhone 16 Pro (device: iphone-16-pro) — 402x874 viewport, DPR 3, mobile UA, touch. Colors: natural titanium, black titanium, desert titanium, white titanium.
  • MacBook Pro 16" (device: macbook-pro-16) — 1728x1117 viewport, DPR 2, desktop UA. Default color.
  • iPad Pro M4 (device: ipad-pro-m4) — 1376x1032 viewport, DPR 2, tablet UA, touch. Colors: silver, space black.
  • Browser macOS (device: browser-macos) — custom or default desktop viewport with macOS-style window chrome.
  • Browser Windows (device: browser-windows) — custom or default desktop viewport with Windows-style window chrome.

Output vs capture viewports

  • Output size and browser capture size are separate. Use aspect_ratio or output for the final image dimensions.
  • Use viewport, capture_dpr, user_agent, emulate_mobile, and emulate_touch when you need to override how the page itself renders during capture.

API example

iPhone 16 Pro with midnight background

curl -X POST https://screenframed.com/v1/capture \
  -H "Authorization: Bearer sf_live_your_key" \
  -H "Content-Type: application/json" \
  -d '{
    "url": "https://your-app.com",
    "device": "iphone-16-pro",
    "device_color": "natural-titanium",
    "aspect_ratio": "9:16",
    "background_preset": "midnight",
    "shadow": "float",
    "padding": 80
  }'