Sec-CH-Viewport-Height header

Secure context: This feature is available only in secure contexts (HTTPS), in some or all supporting browsers.

Experimental: This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HTTP Sec-CH-Viewport-Height request header is a device client hint which provides the client's layout viewport height 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 height. If the Sec-CH-Viewport-Height header appears more than once in a message the last occurrence is used.

A server has to opt-in to receive the Sec-CH-Viewport-Height 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

http

Sec-CH-Viewport-Height: <number>

Directives

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

Examples

Using Sec-CH-Viewport-Height

A server must first opt-in to receive the Sec-CH-Viewport-Height header by sending the response header Accept-CH containing the directive Sec-CH-Viewport-Height.

http

Accept-CH: Sec-CH-Viewport-Height

In subsequent requests, the client might send Sec-CH-Viewport-Height header:

http

Sec-CH-Viewport-Height: 480

Specifications

Specification
Responsive Image Client Hints # sec-ch-viewport-height

Browser compatibility

	desktop					mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`Sec-CH-Viewport-Height` request header Experimental	Chrome – Full support Chrome 105 (Release date: 2022-09-02) footnote Full support	Edge – Full support Edge 105 (Release date: 2022-09-01) footnote Full support	Firefox – No support Firefox footnote No support	Opera – Full support Opera 91 (Release date: 2022-09-14) footnote Full support	Safari – No support Safari footnote No support	Chrome Android – Full support Chrome Android 105 (Release date: 2022-09-02) footnote Full support	Firefox for Android – No support Firefox for Android footnote No support	Opera Android – Full support Opera Android 72 (Release date: 2022-10-21) footnote Full support	Safari on iOS – No support Safari on iOS footnote No support	Samsung Internet – Full support Samsung Internet 20 (Release date: 2023-02-10) footnote Full support	WebView Android – Full support WebView Android 105 (Release date: 2022-09-02) footnote Full support	WebView on iOS – No support WebView on iOS footnote No support

Tip: you can click/tap on a cell for more information.

Full support: Full support
No support: No support
: Experimental. Expect behavior to change in the future.

Sec-CH-Viewport-Height header

Syntax

Directives

Examples

Using Sec-CH-Viewport-Height

Specifications

Browser compatibility

Legend

See also