The HTTPSec-CH-Viewport-Widthrequest header is adevice client hint which provides the client's layout viewport width inCSS 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 theSec-CH-Viewport-Width header appears more than once in a message the last occurrence is used.

A server has to opt-in to receive theSec-CH-Viewport-Width header from the client, by sending theAccept-CH response header.Servers that opt-in will typically also specify it in theVary header which informs caches that the server may send different responses based on the header value in a request.

Syntax

Sec-CH-Viewport-Width: <number>

Directives

<number>

The width of the user's viewport inCSS pixels, rounded up to the nearest integer.

Examples

Using Sec-CH-Viewport-Width

A server must first opt-in to receive theSec-CH-Viewport-Width header by sending the response headerAccept-CH containing the directiveSec-CH-Viewport-Width.

Accept-CH: Sec-CH-Viewport-Width

In subsequent requests, the client might sendSec-CH-Viewport-Width header:

Sec-CH-Viewport-Width: 320

Specifications

Browser compatibility

See also

• Improving user privacy and developer experience with User-Agent Client Hints (developer.chrome.com)
• Device and responsive image client hints
  • Sec-CH-Device-Memory
  • Sec-CH-DPR
  • Sec-CH-Viewport-Height
  • Viewport-WidthDeprecated
• Accept-CH
• HTTP Caching: Vary andVary header