Viewport-Width header
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.
Non-standard: This feature is not standardized. We do not recommend using non-standard features in production, as they have limited browser support, and may change or be removed. However, they can be a suitable alternative in specific cases where no standard option exists.
Warning:
The Viewport-Width header was standardized as Sec-CH-Viewport-Width and the new name is now preferred.
The HTTP Viewport-Width request header is a device client hint which provides the client's layout viewport width in CSS pixels.
The value is rounded up to the smallest following integer (i.e., ceiling value).
The hint can be used with other screen-specific hints to deliver images optimized for a specific screen size, or to omit resources that are not needed for a particular screen width.
If the Viewport-Width header appears more than once in a message the last occurrence is used.
A server has to opt-in to receive the Viewport-Width header from the client, by sending the Accept-CH response header.
Servers that opt-in will typically also specify it in the Vary header which informs caches that the server may send different responses based on the header value in a request.
| Header type | Request header, Client hint |
|---|---|
| Forbidden request header | No |
Syntax
Viewport-Width: <number>
Directives
<number>-
The width of the user's viewport in CSS pixels, rounded up to the nearest integer.
Examples
Using Viewport-Width
A server must first opt-in to receive the Viewport-Width header by sending the response header Accept-CH containing the directive Viewport-Width.
Accept-CH: Viewport-Width
In subsequent requests, the client might send Viewport-Width header:
Viewport-Width: 320
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
Viewport-Width request header
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Non-standard. Check cross-browser support before using.
- Deprecated. Not for use in new websites.
See also
- Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)
- Device and responsive image client hints
Accept-CH- HTTP Caching: Vary and
Varyheader