> ## Documentation Index
> Fetch the complete documentation index at: https://docs.screenframed.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Device Frames

Wrap screenshots in browser, iPhone, iPad, and MacBook frames with matching viewport and emulation behavior.

Device frames control both presentation and browser capture defaults. Physical device frames provide viewport, DPR, user agent, mobile emulation, and touch behavior where appropriate.



## Devices

| Value | Result |
|---|---|
| `browser-macos` | Browser chrome with macOS controls. |
| `browser-windows` | Browser chrome with Windows controls. |
| `iphone-16-pro` | iPhone 16 Pro physical frame and mobile browser profile. |
| `ipad-pro-m4` | iPad Pro M4 physical frame and tablet browser profile. |
| `macbook-pro-16` | MacBook Pro 16-inch physical frame and desktop viewport. |

```json
{
  "url": "https://example.com",
  "device": "browser-macos",
  "background_preset": "midnight",
  "shadow": "float"
}
```

## Device colors

Use `device_color` for physical frame variants:

```json
{
  "url": "https://example.com/mobile",
  "device": "iphone-16-pro",
  "device_color": "natural-titanium",
  "aspect_ratio": "9:16"
}
```

Available colors depend on the device. Common values include `black-titanium`, `natural-titanium`, `white-titanium`, `desert-titanium`, `silver`, and `space-black`.

## Browser chrome

`browser-macos` and `browser-windows` are not physical device frames. They render browser chrome around a normal desktop capture and are the best default for SaaS pages, docs pages, landing pages, and dashboards.

```json
{
  "url": "https://example.com/dashboard",
  "device": "browser-macos",
  "viewport": { "width": 1440, "height": 900 }
}
```

## Frame ratio and scale

Use `frame_ratio` when you want the screenshot subject to keep a specific shape inside the final canvas:

```json
{
  "url": "https://example.com",
  "aspect_ratio": "1:1",
  "frame_ratio": "16:9",
  "device": "browser-macos"
}
```

Use `device_scale` or `frame_scale` to change how large the frame appears inside the output. `device_scale` applies to device frames; `frame_scale` can intentionally bleed the mockup past the canvas edges for hero crops.

Perspective presets cannot be combined with physical device frames. Use `browser-macos`, `browser-windows`, or a deviceless capture when you need perspective controls.