ContextQMD
Back to Content

Viewport-Width header

files/en-us/web/http/reference/headers/viewport-width/index.md

latest2.8 KB
Original Source

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

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

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

<table class="properties"> <tbody> <tr> <th scope="row">Header type</th> <td> {{Glossary("Request header")}}, <a href="/en-US/docs/Web/HTTP/Guides/Client_hints">Client hint</a> </td> </tr> <tr> <th scope="row">{{Glossary("Forbidden request header")}}</th> <td>No</td> </tr> </tbody> </table>

Syntax

http
Viewport-Width: <number>

Directives

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

http
Accept-CH: Viewport-Width

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

http
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")}}
    • {{HTTPHeader("Sec-CH-Viewport-Height")}}
    • {{HTTPHeader("Sec-CH-Device-Memory")}}
    • {{HTTPHeader("Sec-CH-DPR")}}
    • {{HTTPHeader("Sec-CH-Width")}}
    • {{HTTPHeader("DPR")}} {{deprecated_inline}}
    • {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
    • {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}
    • {{HTTPHeader("Width")}} {{deprecated_inline}}
  • {{HTTPHeader("Accept-CH")}}
  • HTTP Caching: Vary and {{HTTPHeader("Vary")}} header