W3cubDocs

@viewport.viewport-fit

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

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

Related at-rule	`@viewport`
Initial value	`auto`
Computed value	as specified

Formal syntax

auto | contain | cover

Examples

Scaling viewport to fit device display

@viewport {
  viewport-fit: cover;
}

Specifications

Specification	Status	Comment
CSS Round Display Level 1 The definition of '"viewport-fit" descriptor' in that specification.	Working Draft	Initial definition.

Browser compatibilityUpdate compatibility data on GitHub

	Desktop
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari
`viewport-fit` descriptor	No	No	No	No	No	No

	Mobile
	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`viewport-fit` descriptor	No	No	No	No	No	No