@viewport

Summary

The @viewport CSS at-rule contains a set of nested descriptors in a CSS block that is delimited by curly braces. These descriptors control viewport settings, primarily on mobile devices.

Syntax

A zoom factor of 1.0 or 100% corresponds to no zooming. Larger values zoom in. Smaller values zoom out.

Descriptors

Browsers are supposed to ignore unrecognized descriptors.

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.
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.
orientation
Controls the document's orientation.

Formal syntax

Error: could not find syntax for this item

Examples

@viewport {
  min-width: 640px;
  max-width: 800px;
}
@viewport {
  zoom: 0.75;
  min-zoom: 0.5;
  max-zoom: 0.9;
}
@viewport {
  orientation: landscape;
}

Specifications

Specification
CSS Device Adaptation Module Level 1
# atviewport-rule

Browser compatibility

BCD tables only load in the browser

See also