[csswg-drafts] Need for detecting the typical viewing distance in media queries (#13398)

Zhang-Junzhi has just created a new issue for https://github.com/w3c/csswg-drafts:

== Need for detecting the typical viewing distance in media queries ==
### Summary

Currently, developers lack a reliable way to detect the typical viewing distance from the current media (as defined in [CSS Values and Units § 4.1](https://drafts.csswg.org/css-values/#reference-pixel)). This can hinder the creation of adaptive designs that account for both visual and tactile interaction needs across different types of media.

### Problem

User agents may interpret CSS pixels differently—for instance, mobile devices, typically held at close reading distance, often define one CSS pixel to a smaller physical size, while desktop screens, viewed at a longer distance, often define it to a larger physical size. This ensures consistent visual perception across viewing distances, but it results in varying physical sizes of CSS pixels across different media.

Without knowledge of the underlying pixel size-anchoring method, developers cannot reliably fine‑tune tactile‑oriented properties, such as minimum touch target sizes. For example, a button that is comfortably tappable on a desktop touch screen (where `1px` maps to a physical pixel) may be too small on a phone (where `1px` maps to a smaller physical size), even if both report `any-pointer: coarse`.

### Use Case Example

A developer wants to ensure touch targets are physically large enough to avoid accidental activation. Today, they might write:

```
@media (any-pointer: coarse) {
  button {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}
```

But this applies the same CSS pixel dimensions regardless of the typical viewing distance of a media. If the user agent provided a way to distinguish the typical viewing distance, authors could adapt sizes more precisely:

```
/* Example of how authors might adjust sizes if the typical viewing distance of a current media were detectable */
@media (typical-viewing-distance: handheld-like) and (any-pointer: coarse) {
  button {
    min-block-size: 44px;
    min-inline-size: 44px;
  }
}

@media (typical-viewing-distance: desktop-like) and (any-pointer: coarse) {
  button {
    min-block-size: 25px;
    min-inline-size: 25px;
  }
}
```

### Why Existing Features Are Insufficient

- `width` / `height` / `resolution` media queries do not reveal the pixel size-anchoring model.

- `any-pointer: coarse` indicates the presence of a coarse pointer, but not the physical scale of CSS pixels.

- `hover` and `pointer` features describe interaction capabilities, not the underlying pixel interpretation.

### Conclusion

I believe exposing the typical viewing distance would improve developers’ ability to create tactile‑aware, accessible interfaces across diverse devices. I hope this use case can be considered for future CSS standards.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13398 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 26 January 2026 17:20:41 UTC