CSS @viewport Rule

❮ Previous Reference Next ❯

This CSS reference is still experimental. Please use caution and check the browser compatibility list first.

Example

@viewport {
  min-width: 640px;
  max-width: 800px;
}

@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}

@viewport {
  orientation: portrait;
}

Meaning

The @viewport CSS at-rule lets you configure the viewport through which the document is viewed. It's primarily used for mobile devices, but is also used by desktop browsers that support features like "snap to edge" (such as Microsoft Edge).



Standard Syntax

@viewport {
  groupRuleBody
}


Browser Support

The numbers in the table specify the first browser version that fully supports the property.



Status





Possible Values

Value Description
min-width Used in the determination of the width of the viewport when the document is first displayed.
max-width Used in the determination of the width of the viewport when the document is first displayed.
width A shorthand descriptor for setting both min-width and max-width.
min-height Used in the determination of the height of the viewport when the document is first displayed.
max-height Used in the determination of the height of the viewport when the document is first displayed.
height A shorthand descriptor for setting both min-height and max-height.
zoom Sets the initial zoom factor.
  • auto - the browser automatically sets the scale to display the entire document;
  • number - a positive number determines the scale, a value of 1.0 corresponds to 100%;
  • percentages - the scale can be set in percent, 100% indicates that scaling is not required.
min-zoom Sets the minimum zoom factor.
max-zoom Sets the maximum zoom factor.
user-zoom Controls whether or not the user should be able to change the zoom factor.
  • zoom - the user can scale the document;
  • fixed - the user is not allowed to zoom.
orientation Controls the document's orientation.
  • auto - sets the orientation automatically based on the position of the device;
  • portrait - the document should be fixed in portrait orientation;
  • landscape - the document should be fixed in landscape orientation.
viewport-fit Controls the display of the document on non-rectangular displays.
❮ Previous Reference Next ❯