# Viewports and modes

Test responsive layouts and themed variants of the same story.

## Set a viewport directly
```ts
// .storybook/preview.ts
export default {
  parameters: {
    framecheck: { viewport: { width: 1280, height: 800 } },
  },
};
```

A story-level value overrides the inherited default. A fixed viewport is often the simplest way to begin responsive coverage.

## Capture named modes
```ts
export const Default = {
  parameters: {
    framecheck: {
      modes: {
        desktop: { viewport: { width: 1280, height: 800 } },
        mobile: { viewport: { width: 390, height: 844 } },
        dark: {
          viewport: { width: 1280, height: 800 },
          globals: { theme: 'dark' },
        },
      },
    },
  },
};
```

The `theme` global must be implemented by your Storybook theme decorator. Naming a mode dark does not change the component by itself. Each mode and browser adds a variant to inspect and maintain.

Disable a mode inherited from a parent with a mode of the same name containing `disable: true`.

## Storybook viewport configuration
Framecheck also resolves Storybook viewport settings. For named devices, include their definitions in `parameters.viewport.options` (or the older `viewports` form). Storybook 9 and newer use a viewport global such as:

```ts
export const Mobile = {
  globals: { viewport: { value: 'mobile1' } },
};
```

If you use extended device names, import and register Storybook's device viewport definitions for your Storybook version. An unknown name cannot be assumed to mean a specific screen size.

## Viewport not applied
Read the warning and define the missing viewport or replace it with an explicit Framecheck `{ width, height }`. A capture not made as requested can block review even if the visible image appears acceptable. Fix the configuration and run again.

## Estimate coverage
For 100 stories with two modes and three browsers, expect up to 600 visual snapshots. Skips and story-specific variants change the actual count. Accessibility adds checks in Chromium. See [usage](/billing/).