Viewport-Width header

{{SecureContext_Header}}{{Non-standard_Header}}

[!WARNING]WARNING: The Viewport-Width header was standardized as {{HTTPHeader("Sec-CH-Viewport-Width")}}Width and the new name is now preferred.

The HTTP Viewport-Width {{Glossary("request header")}}header is a device client hint which provides the client's layout viewport width in {{Glossary("CSS pixel", "CSS pixels")}}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 {{HTTPHeader("Accept-CH")}}CH response header. Servers that opt-in will typically also specify it in the {{HTTPHeader("Vary")}}Vary header which informs caches that the server may send different responses based on the header value in a request.

Header type	{{Glossary("[Request header")}}header](https://developer.mozilla.org/en-US/docs/Glossary/Request%20header), Client hint
{{Glossary("[Forbidden request header")}}header](https://developer.mozilla.org/en-US/docs/Glossary/Forbidden%20request%20header)	No

Syntax

Viewport-Width: <number>

Directives

• <number>
  • : The width of the user's viewport in {{Glossary("CSS pixel","CSS pixels")}}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 {{HTTPHeader("Accept-CH")}}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

{{Compat}}

See also

• Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)
• Device and responsive image client hints
  • {{HTTPHeader("Sec-CH-Viewport-Width")}}Width
  • {{HTTPHeader("Sec-CH-Viewport-Height")}}Height
  • {{HTTPHeader("Sec-CH-Device-Memory")}}Memory
  • {{HTTPHeader("Sec-CH-DPR")}}DPR
  • {{HTTPHeader("Sec-CH-Width")}}Width
  • {{HTTPHeader("DPR")}} {{deprecated_inline}}DPR
  • {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}DPR
  • {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}Memory
  • {{HTTPHeader("Width")}} {{deprecated_inline}}Width
• {{HTTPHeader("Accept-CH")}}CH
• HTTP Caching: Vary and {{HTTPHeader("Vary")}}Vary header