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 value auto
Computed value as 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 compatibilityUpdate compatibility data on GitHub

Chrome Edge Firefox Internet Explorer Opera Safari
viewport-fit descriptor No No No No No No
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

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.