--- title: '@viewport' slug: Web/CSS/@viewport tags: - Adaptation - At-rule - CSS - Device - NeedsContent - NeedsTranslation - Reference - TopicStub translation_of: Web/CSS/@viewport ---

{{CSSRef}}

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

{{csssyntax}}

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 Status Comment
{{SpecName('CSS3 Device', '#the-atviewport-rule', '@viewport')}} {{Spec2('CSS3 Device')}} Initial definition

Browser compatibility

{{CompatibilityTable}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
Basic support 29 (behind a flag) [4] {{CompatNo()}} [2] 10 {{property_prefix("-ms")}} 11.10
Removed in 15
Reintroduced behind a flag in 16		 {{CompatNo}} [3]
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Basic support 4.4 29 {{CompatNo}} [2] 10{{property_prefix("-ms")}}[1] 11.10
Removed in 15
Reintroduced behind a flag in 16		 {{CompatNo}} [3]

[1] There is a bug in IE Mobile 10 on older versions of Windows Phone 8, where device-width, when used within @-ms-viewport, evaluates to the screen width in physical pixels rather than normalized CSS pixels, which is wrong according to the specification. However, when used within a viewport {{HTMLElement("meta")}} tag, device-width evaluates correctly. According to Microsoft, this bug was fixed in Windows Phone 8 Update 3 (a.k.a. GDR3), although there are some reports that the Lumia Black GDR3 update did not fix the bug (at least on the Lumia 920). For more details and a workaround, see Tim Kadlec's blog post "Windows Phone 8 and Device-Width".

[2]: See {{bug(747754, 'summary')}}

[3]: See {{webkitbug(95959)}}

[4]: See Chromium issue #235457: Enable @viewport on all platforms

See also