diff --git a/files/en-us/web/api/device_memory_api/index.md b/files/en-us/web/api/device_memory_api/index.md index 1ec7088640db4be..a66296d52ffaef5 100644 --- a/files/en-us/web/api/device_memory_api/index.md +++ b/files/en-us/web/api/device_memory_api/index.md @@ -5,7 +5,7 @@ page-type: web-api-overview browser-compat: - api.Navigator.deviceMemory - api.WorkerNavigator.deviceMemory - - http.headers.Device-Memory + - http.headers.Sec-CH-Device-Memory spec-urls: https://www.w3.org/TR/device-memory/ --- @@ -48,4 +48,4 @@ You may also use the [Client Hints](/en-US/docs/Web/HTTP/Guides/Client_hints) HT ## See also -- {{HTTPHeader("Device-Memory")}} header +- {{HTTPHeader("Sec-CH-Device-Memory")}} header diff --git a/files/en-us/web/api/navigator/devicememory/index.md b/files/en-us/web/api/navigator/devicememory/index.md index 921f6f7f81e5826..ddc0c4378a41fd0 100644 --- a/files/en-us/web/api/navigator/devicememory/index.md +++ b/files/en-us/web/api/navigator/devicememory/index.md @@ -38,4 +38,4 @@ console.log(`This device has at least ${memory}GiB of RAM.`); ## See also -- {{HTTPHeader("Device-Memory")}} HTTP header +- {{HTTPHeader("Sec-CH-Device-Memory")}} HTTP header diff --git a/files/en-us/web/api/workernavigator/devicememory/index.md b/files/en-us/web/api/workernavigator/devicememory/index.md index b83430727a4d666..217daf49820302a 100644 --- a/files/en-us/web/api/workernavigator/devicememory/index.md +++ b/files/en-us/web/api/workernavigator/devicememory/index.md @@ -40,4 +40,4 @@ console.log(`This device has at least ${memory}GiB of RAM.`); ## See also -- {{HTTPHeader("Device-Memory")}} HTTP header +- {{HTTPHeader("Sec-CH-Device-Memory")}} HTTP header diff --git a/files/en-us/web/http/guides/client_hints/index.md b/files/en-us/web/http/guides/client_hints/index.md index d5c0f18ef546830..a935593d67ed031 100644 --- a/files/en-us/web/http/guides/client_hints/index.md +++ b/files/en-us/web/http/guides/client_hints/index.md @@ -158,7 +158,7 @@ Headers include: {{HTTPHeader("Sec-CH-Prefers-Reduced-Motion")}}, {{HTTPHeader(" ### Device client hints Device client hints allow a server to vary responses based on device characteristics including available memory and screen properties. -Headers include: {{HTTPHeader("Device-Memory")}}, {{HTTPHeader("Width")}}, {{HTTPHeader("Viewport-Width")}}. +Headers include: {{HTTPHeader("Sec-CH-Device-Memory")}}, {{HTTPHeader("Sec-CH-DPR")}}, {{HTTPHeader("Sec-CH-Viewport-Height")}}, {{HTTPHeader("Sec-CH-Viewport-Width")}}. ### Network client hints diff --git a/files/en-us/web/http/reference/headers/content-dpr/index.md b/files/en-us/web/http/reference/headers/content-dpr/index.md index 56b5a1acbd1d340..e864d59d13a3565 100644 --- a/files/en-us/web/http/reference/headers/content-dpr/index.md +++ b/files/en-us/web/http/reference/headers/content-dpr/index.md @@ -68,10 +68,10 @@ See the [`DPR`](/en-US/docs/Web/HTTP/Reference/Headers/DPR#examples) header exam ## See also - Device client hints - - {{HTTPHeader("Device-Memory")}} - - {{HTTPHeader("DPR")}} - - {{HTTPHeader("Viewport-Width")}} - - {{HTTPHeader("Width")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) on developer.chrome.com (2020) diff --git a/files/en-us/web/http/reference/headers/device-memory/index.md b/files/en-us/web/http/reference/headers/device-memory/index.md index 0f41ac6a54b3217..d89d0806a00b01d 100644 --- a/files/en-us/web/http/reference/headers/device-memory/index.md +++ b/files/en-us/web/http/reference/headers/device-memory/index.md @@ -10,7 +10,10 @@ browser-compat: http.headers.Device-Memory sidebar: http --- -{{securecontext_header}}{{deprecated_header}}{{non-standard_header}} +{{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} + +> [!WARNING] +> The `Device-Memory` header was renamed to {{HTTPHeader("Sec-CH-Device-Memory")}} and the new name is now preferred. The HTTP **`Device-Memory`** {{Glossary("request header")}} is used in [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) to indicate the approximate amount of available RAM on the client device, in gigabytes. The header is part of the {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}. @@ -76,9 +79,13 @@ Device-Memory: 1 - {{DOMxRef("Navigator.deviceMemory")}} - {{DOMxRef("WorkerNavigator.deviceMemory")}} - Device client hints - - {{HTTPHeader("Content-DPR")}} - - {{HTTPHeader("DPR")}} - - {{HTTPHeader("Viewport-Width")}} - - {{HTTPHeader("Width")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} + - {{HTTPHeader("Width")}} {{deprecated_inline}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} diff --git a/files/en-us/web/http/reference/headers/dpr/index.md b/files/en-us/web/http/reference/headers/dpr/index.md index dd98c293a52fa3b..386e36b67a70527 100644 --- a/files/en-us/web/http/reference/headers/dpr/index.md +++ b/files/en-us/web/http/reference/headers/dpr/index.md @@ -13,8 +13,7 @@ sidebar: http {{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} > [!WARNING] -> The `DPR` header was removed from the client hints specification in [draft-ietf-httpbis-client-hints-07](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07). -> The proposed replacement is [`Sec-CH-DPR`](https://wicg.github.io/responsive-image-client-hints/#sec-ch-dpr) (Responsive Image Client Hints). +> The `DPR` header was renamed to {{HTTPHeader("Sec-CH-DPR")}} and the new name is now preferred. The HTTP **`DPR`** {{Glossary("request header")}} provides [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints) about the client device pixel ratio (DPR). This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}. @@ -24,6 +23,7 @@ This is similar to the role played by `x` descriptors in the `` [`srcset`]( If a server uses the `DPR` hint to choose which resource is sent in a response, the response must include the {{HTTPHeader("Content-DPR")}} header. The client must use the value in `Content-DPR` for layout if it differs from the value in the request's `DPR` header. + If the `DPR` header appears more than once in a message the last occurrence is used. Servers that opt in to the `DPR` client hint will typically also specify it in the {{HTTPHeader("Vary")}} header to inform caches that the server may send different responses based on the header value in a request. @@ -82,10 +82,14 @@ Content-DPR: 2.0 ## See also - Device client hints - - {{HTTPHeader("Content-DPR")}} - - {{HTTPHeader("Device-Memory")}} - - {{HTTPHeader("Viewport-Width")}} - - {{HTTPHeader("Width")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} + - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} + - {{HTTPHeader("Width")}} {{deprecated_inline}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) diff --git a/files/en-us/web/http/reference/headers/index.md b/files/en-us/web/http/reference/headers/index.md index a8ff48b771d6817..5d43b5467f1c887 100644 --- a/files/en-us/web/http/reference/headers/index.md +++ b/files/en-us/web/http/reference/headers/index.md @@ -421,16 +421,25 @@ The [UA client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#user_agent_client #### Device client hints -- {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} {{non-standard_inline}} - - : Response header used to confirm the image device to pixel ratio (DPR) in requests where the screen {{HTTPHeader("DPR")}} client hint was used to select an image resource. -- {{HTTPHeader("Device-Memory")}} +- {{HTTPHeader("Sec-CH-Device-Memory")}} {{experimental_inline}} - : Approximate amount of available client RAM memory. This is part of the [Device Memory API](/en-US/docs/Web/API/Device_Memory_API). -- {{HTTPHeader("DPR")}} {{deprecated_inline}} {{non-standard_inline}} +- {{HTTPHeader("Sec-CH-DPR")}} {{experimental_inline}} - : Request header that provides the client device pixel ratio (the number of physical {{glossary("device pixel", "device pixels")}} for each {{Glossary("CSS pixel")}}). -- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} {{non-standard_inline}} +- {{HTTPHeader("Sec-CH-Viewport-Height")}} {{experimental_inline}} + - : Request header provides the client's layout viewport height in {{Glossary("CSS pixel","CSS pixels")}}. +- {{HTTPHeader("Sec-CH-Viewport-Width")}} {{experimental_inline}} - : Request header provides the client's layout viewport width in {{Glossary("CSS pixel","CSS pixels")}}. + +##### Deprecated device client hints + +- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} {{non-standard_inline}} + - : Renamed to {{HTTPHeader("Sec-CH-Device-Memory")}} +- {{HTTPHeader("DPR")}} {{deprecated_inline}} {{non-standard_inline}} + - : Renamed to {{HTTPHeader("Sec-CH-DPR")}} +- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} {{non-standard_inline}} + - : Renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}} - {{HTTPHeader("Width")}} {{deprecated_inline}} {{non-standard_inline}} - - : Request header indicates the desired resource width in physical pixels (the intrinsic size of an image). + - : Renamed to `Sec-CH-Width` #### Network client hints diff --git a/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md b/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md new file mode 100644 index 000000000000000..5c5ffeb71095f8a --- /dev/null +++ b/files/en-us/web/http/reference/headers/sec-ch-device-memory/index.md @@ -0,0 +1,81 @@ +--- +title: Sec-CH-Device-Memory header +short-title: Sec-CH-Device-Memory +slug: Web/HTTP/Reference/Headers/Sec-CH-Device-Memory +page-type: http-header +browser-compat: http.headers.Sec-CH-Device-Memory +sidebar: http +--- + +{{SecureContext_Header}} + +The HTTP **`Sec-CH-Device-Memory`** {{Glossary("request header")}} is used in [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints#device_client_hints) to indicate the approximate amount of available RAM on the client device, in gigabytes. +The header is part of the {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}}. + +Client hints are accessible only on secure origins. +A server has to opt in to receive the `Sec-CH-Device-Memory` header from the client, by first sending the {{HTTPHeader("Accept-CH")}} response header. +Servers that opt in to the `Sec-CH-Device-Memory` client hint will typically also specify it in the {{HTTPHeader("Vary")}} header to inform caches that the server may send different responses based on the header value in a request. + + + + + + + + + + + + +
Header type + {{Glossary("Request header")}}, + Client hint +
{{Glossary("Forbidden request header")}}No
+ +## Syntax + +```http +Sec-CH-Device-Memory: +``` + +## Directives + +- `` + - : The approximate amount of device RAM. Possible values are: `0.25`, `0.5`, `1`, `2`, `4`, `8`. + The amount of device RAM can be used as a {{glossary("fingerprinting")}} variable, so values for the header are intentionally coarse to reduce the potential for its misuse. + +## Examples + +The server first needs to opt in to receive `Sec-CH-Device-Memory` header by sending the {{HTTPHeader("Accept-CH")}} response header containing `Sec-CH-Device-Memory`: + +```http +Accept-CH: Sec-CH-Device-Memory +``` + +Then on subsequent requests the client might send `Sec-CH-Device-Memory` header back: + +```http +Sec-CH-Device-Memory: 1 +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) +- {{DOMxRef("Device Memory API", "Device Memory API", "", "nocode")}} +- {{DOMxRef("Navigator.deviceMemory")}} +- {{DOMxRef("WorkerNavigator.deviceMemory")}} +- Device client hints + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} +- {{HTTPHeader("Accept-CH")}} +- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} diff --git a/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md b/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md new file mode 100644 index 000000000000000..c6f208b30daf1d8 --- /dev/null +++ b/files/en-us/web/http/reference/headers/sec-ch-dpr/index.md @@ -0,0 +1,76 @@ +--- +title: Sec-CH-DPR header +short-title: Sec-CH-DPR +slug: Web/HTTP/Reference/Headers/Sec-CH-DPR +page-type: http-header +browser-compat: http.headers.Sec-CH-DPR +sidebar: http +--- + +{{SecureContext_Header}} + +The HTTP **`Sec-CH-DPR`** {{Glossary("request header")}} provides [device client hints](/en-US/docs/Web/HTTP/Guides/Client_hints) about the client device pixel ratio (DPR). +This ratio is the number of physical device pixels corresponding to every {{Glossary("CSS pixel")}}. + +The hint is useful when selecting image sources that best correspond to a screen's pixel density. +This is similar to the role played by `x` descriptors in the `` [`srcset`](/en-US/docs/Web/HTML/Reference/Elements/img#srcset) attribute to allow user agents to select a preferred image. + +If the `Sec-CH-DPR` header appears more than once in a message the last occurrence is used. + +Servers that opt in to the `Sec-CH-DPR` client hint will typically also specify it in the {{HTTPHeader("Vary")}} header to inform caches that the server may send different responses based on the header value in a request. + + + + + + + + + + + + +
Header type + {{Glossary("Request header")}}, + Client hint +
{{Glossary("Forbidden request header")}}No
+ +## Syntax + +```http +Sec-CH-DPR: +``` + +## Directives + +- `` + - : The client device pixel ratio. + +## Examples + +A server must first opt in to receive the `Sec-CH-DPR` header by sending the response header {{HTTPHeader("Accept-CH")}} containing the directive `Sec-CH-DPR`. + +```http +Accept-CH: Sec-CH-DPR +``` + +Then on subsequent requests the client might send `Sec-CH-DPR` header to the server: + +```http +Sec-CH-DPR: 2.0 +``` + +## Browser compatibility + +{{Compat}} + +## See also + +- Device client hints + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("DPR")}} {{deprecated_inline}} +- {{HTTPHeader("Accept-CH")}} +- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} +- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) diff --git a/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md b/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md new file mode 100644 index 000000000000000..602dcce3b6dade9 --- /dev/null +++ b/files/en-us/web/http/reference/headers/sec-ch-viewport-height/index.md @@ -0,0 +1,76 @@ +--- +title: Sec-CH-Viewport-Height header +short-title: Sec-CH-Viewport-Height +slug: Web/HTTP/Reference/Headers/Sec-CH-Viewport-Height +page-type: http-header +browser-compat: http.headers.Sec-CH-Viewport-Height +sidebar: http +--- + +{{SecureContext_header}} + +The HTTP **`Sec-CH-Viewport-Height`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints) which provides the client's layout viewport height 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 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 {{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. + + + + + + + + + + + + +
Header type + {{Glossary("Request header")}}, + Client hint +
{{Glossary("Forbidden request header")}}No
+ +## Syntax + +```http +Sec-CH-Viewport-Height: +``` + +## Directives + +- `` + - : The height of the user's viewport in {{Glossary("CSS pixel","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 {{HTTPHeader("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 +``` + +## Browser compatibility + +{{Compat}} + +## See also + +- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) +- Device client hints + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Viewport-Width")}} +- {{HTTPHeader("Accept-CH")}} +- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header diff --git a/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md b/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md new file mode 100644 index 000000000000000..9d6e206fb1d6a41 --- /dev/null +++ b/files/en-us/web/http/reference/headers/sec-ch-viewport-width/index.md @@ -0,0 +1,77 @@ +--- +title: Sec-CH-Viewport-Width header +short-title: Sec-CH-Viewport-Width +slug: Web/HTTP/Reference/Headers/Sec-CH-Viewport-Width +page-type: http-header +browser-compat: http.headers.Sec-CH-Viewport-Width +sidebar: http +--- + +{{SecureContext_header}} + +The HTTP **`Sec-CH-Viewport-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints) 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 `Sec-CH-Viewport-Width` 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-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. + + + + + + + + + + + + +
Header type + {{Glossary("Request header")}}, + Client hint +
{{Glossary("Forbidden request header")}}No
+ +## Syntax + +```http +Sec-CH-Viewport-Width: +``` + +## Directives + +- `` + - : The width of the user's viewport in {{Glossary("CSS pixel","CSS pixels")}}, rounded up to the nearest integer. + +## Examples + +### Using Sec-CH-Viewport-Width + +A server must first opt-in to receive the `Sec-CH-Viewport-Width` header by sending the response header {{HTTPHeader("Accept-CH")}} containing the directive `Sec-CH-Viewport-Width`. + +```http +Accept-CH: Sec-CH-Viewport-Width +``` + +In subsequent requests, the client might send `Sec-CH-Viewport-Width` header: + +```http +Sec-CH-Viewport-Width: 320 +``` + +## Browser compatibility + +{{Compat}} + +## See also + +- [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) +- Device client hints + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} +- {{HTTPHeader("Accept-CH")}} +- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header diff --git a/files/en-us/web/http/reference/headers/viewport-width/index.md b/files/en-us/web/http/reference/headers/viewport-width/index.md index 01f2796d8a55d63..b49cffae28ca334 100644 --- a/files/en-us/web/http/reference/headers/viewport-width/index.md +++ b/files/en-us/web/http/reference/headers/viewport-width/index.md @@ -10,11 +10,10 @@ browser-compat: http.headers.Viewport-Width sidebar: http --- -{{Deprecated_Header}}{{SecureContext_header}}{{Non-standard_Header}} +{{Deprecated_Header}}{{SecureContext_Header}}{{Non-standard_Header}} > [!WARNING] -> The `Viewport-Width` header was removed from the client hints specification in [draft-ietf-httpbis-client-hints-07](https://datatracker.ietf.org/doc/html/draft-ietf-httpbis-client-hints-07). -> The proposed replacement is [`Sec-CH-Viewport-Width`](https://wicg.github.io/responsive-image-client-hints/#sec-ch-viewport-width) (Responsive Image Client Hints). +> The `Viewport-Width` header was renamed to {{HTTPHeader("Sec-CH-Viewport-Width")}} and the new name is now preferred. The HTTP **`Viewport-Width`** {{Glossary("request header")}} is a [device client hint](/en-US/docs/Web/HTTP/Guides/Client_hints) 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). @@ -75,6 +74,14 @@ Viewport-Width: 320 ## See also - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com) -- {{HTTPHeader("Content-DPR")}}, {{HTTPHeader("Device-Memory")}}, {{HTTPHeader("DPR")}}, {{HTTPHeader("Width")}} device client hints +- Device client hints + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} + - {{HTTPHeader("Width")}} {{deprecated_inline}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header diff --git a/files/en-us/web/http/reference/headers/width/index.md b/files/en-us/web/http/reference/headers/width/index.md index 10ea8fb8596f391..09374b047caf4d0 100644 --- a/files/en-us/web/http/reference/headers/width/index.md +++ b/files/en-us/web/http/reference/headers/width/index.md @@ -69,7 +69,16 @@ Width: 1920 ## See also -- {{HTTPHeader("Content-DPR")}}, {{HTTPHeader("Device-Memory")}}, {{HTTPHeader("DPR")}}, {{HTTPHeader("Viewport-Width")}} device client hints +- Device client hints + - {{HTTPHeader("Sec-CH-Viewport-Width")}} + - {{HTTPHeader("Sec-CH-Viewport-Height")}} + - {{HTTPHeader("Sec-CH-Device-Memory")}} + - {{HTTPHeader("Sec-CH-DPR")}} + - {{HTTPHeader("DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Content-DPR")}} {{deprecated_inline}} + - {{HTTPHeader("Device-Memory")}} {{deprecated_inline}} + - {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}} + - {{HTTPHeader("Width")}} {{deprecated_inline}} - {{HTTPHeader("Accept-CH")}} - [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}} header - [Improving user privacy and developer experience with User-Agent Client Hints](https://developer.chrome.com/docs/privacy-security/user-agent-client-hints) (developer.chrome.com)