Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions files/en-us/web/api/device_memory_api/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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/
---

Expand Down Expand Up @@ -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
2 changes: 1 addition & 1 deletion files/en-us/web/api/navigator/devicememory/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Original file line number Diff line number Diff line change
Expand Up @@ -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
2 changes: 1 addition & 1 deletion files/en-us/web/http/guides/client_hints/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
8 changes: 4 additions & 4 deletions files/en-us/web/http/reference/headers/content-dpr/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
17 changes: 12 additions & 5 deletions files/en-us/web/http/reference/headers/device-memory/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Comment thread
hamishwillee marked this conversation as resolved.
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")}}.
Expand Down Expand Up @@ -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")}}
Comment thread
tunetheweb marked this conversation as resolved.
Comment thread
hamishwillee marked this conversation as resolved.
- {{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")}}
16 changes: 10 additions & 6 deletions files/en-us/web/http/reference/headers/dpr/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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")}}.
Expand All @@ -24,6 +23,7 @@ This is similar to the role played by `x` descriptors in the `<img>` [`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.
Expand Down Expand Up @@ -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")}}
Comment thread
tunetheweb marked this conversation as resolved.
- {{HTTPHeader("Content-DPR")}} {{deprecated_inline}}
- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}
- {{HTTPHeader("Viewport-Width")}} {{deprecated_inline}}
- {{HTTPHeader("Width")}} {{deprecated_inline}}
Comment thread
hamishwillee marked this conversation as resolved.
- {{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)
21 changes: 15 additions & 6 deletions files/en-us/web/http/reference/headers/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
@@ -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.

<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
Sec-CH-Device-Memory: <number>
```

## Directives

- `<number>`
- : 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")}}
Comment thread
tunetheweb marked this conversation as resolved.
- {{HTTPHeader("Device-Memory")}} {{deprecated_inline}}
- {{HTTPHeader("Accept-CH")}}
- [HTTP Caching: Vary](/en-US/docs/Web/HTTP/Guides/Caching#vary) and {{HTTPHeader("Vary")}}
76 changes: 76 additions & 0 deletions files/en-us/web/http/reference/headers/sec-ch-dpr/index.md
Original file line number Diff line number Diff line change
@@ -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 `<img>` [`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.

<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
Sec-CH-DPR: <number>
```

## Directives

- `<number>`
- : 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")}}
Comment thread
tunetheweb marked this conversation as resolved.
- {{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)
Original file line number Diff line number Diff line change
@@ -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.

<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
Sec-CH-Viewport-Height: <number>
```

## Directives

- `<number>`
- : 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
Loading