The width CSS descriptor is shorthand for setting both the min-width and the max-width of the viewport. By providing one viewport length value, that value will determine both the min-width and the max-width to the value provided.

If two viewport values are provided the first value will be set to the min-width and the second value will be set max-width.

Related at-rule@viewport
Initial valueas each of the properties of the shorthand:
Percentagesas each of the properties of the shorthand:
  • min-width: refer to the width of the containing block
  • max-width: refer to the width of the containing block
Mediaas each of the properties of the shorthand:
Computed valueas each of the properties of the shorthand:
  • min-width: the percentage as specified or the absolute length
  • max-width: the percentage as specified or the absolute length or none
Canonical orderorder of appearance in the formal grammar of the values

Syntax

/* An example with one viewport value: */
@viewport {
    width: 320px;
}

/* An example with two viewport values: */
@viewport {
    width: 320px, 120px;
}

 

Values

auto
The used value is calculated from the other CSS descriptors' values.
<length>
A non-negative absolute or relative length.
<percentage>
A percentage value relative to the width or height of the initial viewport at zoom factor 1.0, for horizontal and vertical lengths respectively. Must be non-negative.

Formal syntax

auto | <length> | <percentage>

Specifications

Specification Status Comment
CSS Device Adaptation
The definition of '"min-width" descriptor' in that specification.
Working Draft Initial definition

Browser compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic supportChrome Full support 29Edge ? Firefox No support NoIE Full support 10
Prefixed
Full support 10
Prefixed
Prefixed Requires the vendor prefix: -ms-
Opera Full support 16
Full support 16
No support 11.1 — 15
Safari No support NoWebView Android Full support 4.4Chrome Android Full support 29Edge Mobile ? Firefox Android No support NoOpera Android Full support 16
Full support 16
No support 11.1 — 14
Safari iOS No support NoSamsung Internet Android Full support Yes

Legend

Full support  
Full support
No support  
No support
Compatibility unknown  
Compatibility unknown
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

 

Document Tags and Contributors

Contributors to this page: fscholz, mfluehr, unscsprt, mrenty, tuttza
Last updated by: fscholz,