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

# Viewports and device emulation

> Control viewport dimensions and emulate mobile devices, tablets, and retina displays for responsive design testing.

Screenshotly lets you set exact viewport dimensions and emulate device characteristics like screen density, touch support, and orientation.

## Setting viewport dimensions

Use `viewport_width` and `viewport_height` to define the browser viewport size in pixels:

```javascript theme={null}
const screenshot = await client.capture({
  url: 'https://example.com',
  viewport_width: 1440,
  viewport_height: 900
});
```

Default values are `1280x1024` when not specified.

## Device emulation parameters

| Parameter             | Type    | Default | Description                                |
| --------------------- | ------- | ------- | ------------------------------------------ |
| `viewport_width`      | integer | 1280    | Viewport width in pixels (100–5000)        |
| `viewport_height`     | integer | 1024    | Viewport height in pixels (100–5000)       |
| `device_scale_factor` | number  | 1       | Device pixel ratio (1–3, use 2 for retina) |
| `viewport_mobile`     | boolean | false   | Emulate mobile device behavior             |
| `viewport_has_touch`  | boolean | false   | Enable touch event support                 |
| `viewport_landscape`  | boolean | false   | Use landscape orientation                  |

## Common device presets

Here are viewport settings for popular devices:

| Device                | Width | Height | Scale factor | Mobile |
| --------------------- | ----- | ------ | ------------ | ------ |
| iPhone 14             | 390   | 844    | 3            | true   |
| iPhone SE             | 375   | 667    | 2            | true   |
| iPad Air              | 820   | 1180   | 2            | true   |
| iPad Mini (landscape) | 1024  | 768    | 2            | true   |
| Pixel 7               | 412   | 915    | 2.625        | true   |
| MacBook Pro 14"       | 1512  | 982    | 2            | false  |
| Desktop 1080p         | 1920  | 1080   | 1            | false  |

## Examples

### Mobile device

<CodeGroup>
  ```javascript JavaScript SDK theme={null}
  const screenshot = await client.capture({
    url: 'https://example.com',
    viewport_width: 390,
    viewport_height: 844,
    device_scale_factor: 3,
    viewport_mobile: true,
    viewport_has_touch: true
  });
  ```

  ```bash cURL theme={null}
  curl -X POST https://api.screenshotly.dev/v1/capture \
    -H "X-API-Key: $SCREENSHOTLY_API_KEY" \
    -H "Content-Type: application/json" \
    -d '{
      "url": "https://example.com",
      "options": {
        "viewport_width": 390,
        "viewport_height": 844,
        "device_scale_factor": 3,
        "viewport_mobile": true,
        "viewport_has_touch": true
      }
    }' \
    --output screenshot.png
  ```
</CodeGroup>

### Tablet in landscape

```javascript theme={null}
const screenshot = await client.capture({
  url: 'https://example.com',
  viewport_width: 1024,
  viewport_height: 768,
  device_scale_factor: 2,
  viewport_mobile: true,
  viewport_has_touch: true,
  viewport_landscape: true
});
```

### Retina desktop

```javascript theme={null}
const screenshot = await client.capture({
  url: 'https://example.com',
  viewport_width: 1440,
  viewport_height: 900,
  device_scale_factor: 2
});
```

<Tip>
  Combine viewport settings with `full_page: true` to capture the entire page at a specific device width. The width controls how the page renders responsively, while full-page captures the complete scrollable height.
</Tip>

## Testing responsive breakpoints

To test your site across multiple breakpoints, use [batch processing](/guides/batch-processing) with different viewport settings, or loop through common widths:

```javascript theme={null}
const breakpoints = [375, 768, 1024, 1440, 1920];

for (const width of breakpoints) {
  const screenshot = await client.capture({
    url: 'https://example.com',
    viewport_width: width,
    viewport_height: 800,
    full_page: true
  });
  console.log(`Captured at ${width}px`);
}
```