Viewport-Width

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.

The Viewport-Width device client hint request header provides the client's layout viewport width in CSS pixels. The value is rounded up to the smallest following integer (i.e. ceiling value).

Header type	Request header, Client hint
Forbidden header name	no

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.

Note:

Client Hints are accessible only on secure origins (via TLS).
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 to the Viewport-Width client hint will typically also specify it in the Vary header. This informs caches that the server may send different responses based on the header value in a request.
Viewport-Width was removed from the original client hints specification in draft-ietf-httpbis-client-hints-07. The proposed replacement is Sec-CH-Viewport-Width (Responsive Image Client Hints).

Syntax

Viewport-Width: <number>

Directives

<number>: The width of the user's viewport in CSS pixels, rounded up to the nearest integer.

Examples

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

Then on subsequent requests the client might send Viewport-Width header back:

Viewport-Width: 320

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	WebView Android	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet
`Viewport-Width`	46	≤79	?	?	33	?	46	46	?	33	?	5.0

Viewport-Width

Viewport-Width

Syntax

Directives

Examples

Browser compatibility

See also