viewport-fit

The viewport-fit CSS @viewport descriptor controls how a document's viewport fills the screen.

Syntax

/* Keyword values */
viewport-fit: auto;
viewport-fit: contain;
viewport-fit: cover;

Values

auto

This value doesn’t affect the initial layout viewport, and the whole web page is viewable.

contain

The viewport is scaled to fit the largest rectangle inscribed within the display.

cover

The viewport is scaled to fill the device display. It is highly recommended to make use of the safe area inset variables to ensure that important content doesn't end up outside the display.

Accessibility concerns

When using the viewport-fit descriptor, one must keep in mind that not all device displays are rectangular, and should therefore make use of the safe area inset variables.

Formal definition

Formal syntax

auto | contain | cover

Examples

Scaling viewport to fit device display

@viewport {
  viewport-fit: cover;
}

Specifications

Browser compatibility

See also

• @viewport
• env()