# Responsive viewports

Argos lets you capture the same page at multiple breakpoints with a single test. Configure viewports once and get consistent responsive coverage across Playwright, Cypress and Puppeteer.

## Prerequisites

This feature works seamlessly with [Playwright](/docs/sdks-reference/playwright.md), [Cypress](/docs/sdks-reference/cypress.md) and [Puppeteer](/docs/sdks-reference/puppeteer.md).

{% hint style="info" %}
If you use Storybook, see the dedicated guide on [Storybook modes](/docs/learn/how-to-guides/visual-coverage/storybook-story-modes.md).
{% endhint %}

## Viewport Configuration

Pass a viewports array to `argosScreenshot()` to generate screenshots for each dimension or preset you define. You can mix explicit sizes and device presets.

```js
await argosScreenshot(..., {
  viewports: [
    "iphone-4",
    { width: 800, height: 600 },
    { preset: "ipad-2", orientation: "landscape" },
  ],
});
```

## Available Presets

| Preset            | Width (px) | Height (px) |
| ----------------- | ---------- | ----------- |
| pro-display       | 3008       | 1962        |
| studio-display    | 2560       | 1440        |
| imac-24           | 2240       | 1260        |
| macbook-16        | 1536       | 960         |
| macbook-15        | 1440       | 900         |
| macbook-13        | 1280       | 800         |
| macbook-11        | 1366       | 768         |
| ipad-12-pro       | 1024       | 1366        |
| ipad-11-pro       | 834        | 1194        |
| ipad-10           | 810        | 1080        |
| ipad-10-pro       | 834        | 1112        |
| ipad-9-pro        | 768        | 1024        |
| ipad-2            | 768        | 1024        |
| ipad-mini         | 768        | 1024        |
| iphone-air        | 420        | 912         |
| iphone-17         | 402        | 874         |
| iphone-17-pro     | 402        | 873         |
| iphone-17-pro-max | 440        | 956         |
| iphone-16         | 393        | 852         |
| iphone-16e        | 390        | 844         |
| iphone-16-plus    | 430        | 932         |
| iphone-16-pro     | 402        | 874         |
| iphone-16-pro-max | 440        | 956         |
| iphone-15         | 393        | 852         |
| iphone-15-plus    | 430        | 932         |
| iphone-15-pro     | 393        | 852         |
| iphone-15-pro-max | 430        | 932         |
| iphone-14         | 390        | 844         |
| iphone-14-plus    | 428        | 926         |
| iphone-14-pro     | 393        | 852         |
| iphone-14-pro-max | 490        | 932         |
| iphone-13         | 390        | 844         |
| iphone-13-mini    | 360        | 780         |
| iphone-13-pro     | 390        | 844         |
| iphone-13-pro-max | 428        | 926         |
| iphone-12         | 390        | 844         |
| iphone-12-mini    | 360        | 780         |
| iphone-12-pro     | 390        | 844         |
| iphone-12-pro-max | 428        | 926         |
| iphone-11         | 414        | 896         |
| iphone-11-pro     | 375        | 812         |
| iphone-11-pro-max | 414        | 896         |
| iphone-xr         | 414        | 896         |
| iphone-x          | 375        | 812         |
| iphone-6+         | 414        | 736         |
| iphone-se2        | 375        | 667         |
| iphone-8          | 375        | 667         |
| iphone-7          | 375        | 667         |
| iphone-6          | 375        | 667         |
| iphone-5          | 320        | 568         |
| iphone-4          | 320        | 480         |
| iphone-3          | 320        | 480         |
| samsung-s10       | 360        | 760         |
| samsung-note9     | 414        | 846         |

## Troubleshooting and Best Practices

Many sites compute layout at load time and will not adapt cleanly if the viewport changes later. If you notice issues, you may want to run your test suite entirely for each viewport instead of changing the viewport before taking each screenshot.

For example, in Playwright you can create a separate browser context for each viewport size.

```ts
import { defineConfig, devices } from "@playwright/test";

export default defineConfig({
  projects: [
    {
      name: "chromium-mobile",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",
      },
    },
    {
      name: "chromium-mobile",
      use: {
        ...devices["Desktop Chrome"],
        channel: "chrome",
        viewport: { width: 402, height: 874 }, // iPhone 7 viewport
      },
    },
  ],
});
```

You can also run `page.setViewportSize()` before navigating to the page to ensure the layout is computed correctly.

```ts
await page.setViewportSize({
  width: 640,
  height: 480,
});
await page.goto("https://example.com");
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://argos-ci.com/docs/learn/how-to-guides/visual-coverage/responsive-viewports.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.