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.
This descriptor hasn't been added to https://github.com/mdn/data/blob/master/css/at-rules.json yet.
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 compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
viewport-fit descriptor | Chrome No support No | Edge No support No | Firefox No support No | IE No support No | Opera No support No | Safari No support No | WebView Android No support No | Chrome Android No support No | Firefox Android No support No | Opera Android No support No | Safari iOS No support No | Samsung Internet Android No support No |
Legend
- No support
- No support