@viewport CSS At-Rule

The @viewport at-rule provides a way for stylesheets to describe how the browser should establish and treat the page’s viewport — the rectangular region used for layout and for mapping CSS viewport-relative units — on devices with varying screen sizes and pixel densities. Rather than altering document content directly, it communicates layout intentions such as the initial scale, whether the page should be constrained to the device width, and how orientation changes are handled, so the user agent can compute the effective viewport used for rendering and scrolling.

Because the viewport plays a central role in layout, declarations placed via @viewport affect many downstream behaviors: the calculation of CSS viewport-relative units, the point at which responsive rules take effect, and the relationship between visual viewport (what the user sees while zoomed) and layout viewport (the coordinate system used for layout). Changes to the viewport typically trigger reflows and can change the apparent size and placement of elements; they also interact with dynamic events such as rotation, pinch-zooming, and keyboard appearance on mobile devices. Treating viewport control as a layout-level instruction helps keep scaling decisions consistent across a site when authored in CSS rather than in document head metadata.

Applying viewport rules requires attention to authoring and accessibility concerns. Because they change how users can view and scale content, viewport directives should be used sparingly and never in ways that inhibit a user’s ability to zoom or otherwise control their view. They also participate in the normal cascade of stylesheets and can be overridden by later author styles or user style preferences; consequently, authors should think in terms of resilient, flexible layouts that don’t depend on forcibly constraining the viewport. In practice, this at-rule is most useful for harmonizing CSS-driven responsive design with the browser’s viewport mechanics while keeping user control and predictable reflow behavior in mind.

@viewport {
  <group-rule-body>
}

• 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.
• zoomSets 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-zoomControls 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.
• orientationControls 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.

The following information will show you the current browser support for the CSS at-rule @viewport. Hover over a browser icon to see the version that first introduced support for this CSS at-rule.

Browser support for this at-rule is currently unknown.

Desktop

Tablets & Mobile