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.


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


This value doesn’t affect the initial layout viewport, and the whole web page is viewable.
The viewport is scaled to fit the largest rectangle inscribed within the display.
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 valueauto
Computed valueas specified

Formal syntax

auto | contain | cover


Scaling viewport to fit device display

@viewport {
  viewport-fit: cover;


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

Browser compatibility

Update compatibility data on GitHub
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
viewport-fit descriptorChrome No support NoEdge No support NoFirefox No support NoIE No support NoOpera No support NoSafari No support NoWebView Android No support NoChrome Android No support NoFirefox Android No support NoOpera Android No support NoSafari iOS No support NoSamsung Internet Android No support No


No support  
No support

See also