@viewport CSS At-Rule

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

Description

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).

Syntax

@viewport {
  <group-rule-body>
}

Values

min-widthUsed in the determination of the width of the viewport when the document is first displayed.
max-widthUsed in the determination of the width of the viewport when the document is first displayed.
widthA shorthand descriptor for setting both min-width and max-width.
min-heightUsed in the determination of the height of the viewport when the document is first displayed.
max-heightUsed in the determination of the height of the viewport when the document is first displayed.
heightA 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-zoomSets the minimum zoom factor.
max-zoomSets 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-fitControls the display of the document on non-rectangular displays.

Example

@viewport {

  min-width: 640px;

  max-width: 800px;

}



@viewport {

  zoom: 0.75;

  min-zoom: 0.5;

  max-zoom: 0.9;

}



@viewport {

  orientation: portrait;

}