viewport-fit

There was a scripting error on this page. While it is being addressed by site editors, you can view partial content below.

Draft
This page is not complete.

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.

Value not found in DB!

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.

Formal syntax

{{ csssyntax }}

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.

Specifications

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

Browser compatibility

FeatureChromeEdgeFirefoxInternet ExplorerOperaSafari
Basic support ? ? ? ? ?11
FeatureAndroid webviewChrome for AndroidEdge mobileFirefox for AndroidOpera AndroidiOS SafariSamsung Internet
Basic support ? ? ? ? ?11 ?

See also

Document Tags and Contributors

Contributors to this page: Esteban-Rocha, mfuji09, ExE-Boss
Last updated by: Esteban-Rocha,