响应式网络设计的古老问题之一是我们如何区分移动设备和桌面。
当然，您会说这是一个琐碎的问题：我们有媒体查询，假人！

@media (max-width: 768px) {
  /* Styling goes here for handheld, ie "mobile" devices */
}

@media (min-width: 1200px) {
  /* Styling goes here for laptops and desktops */
}

所以我们可以将其称为一天，继续我们的生活，对
不完全！

让我们从上述代码（以及我们每天编写的大多数其他媒体查询）开始的事实，随身携带一个假设的 lot 。

我们假设如果视口较小或等于768px，则假设它是iPad或其他类似平板电脑彼此。

我们还假设一种带有显示的设备终于1200px宽是一种笔记本电脑，但是有很多平板电脑在景观模式下宽了。

当我们只是在谈论布局时，这些假设通常是安全的，并且我们尝试找到不同的断点以根据不同的屏幕尺寸调整设计。

但是，当我们想要不同的行为时，问题就开始了。就像说我们想在桌面上显示一个小的下拉日历，但在移动设备上，我们想要一个弹出日期选择器组件。

问题的要点是，有时我们需要不同的UI，对于主要输入方法是触摸的设备和它是鼠标的设备。

直到最近，我们必须导致各种JS骇客来检测设备的触摸功能。例如，这是一个流行的片段：

function isTouchDevice() {
  return (
    "ontouchstart" in window ||
    navigator.maxTouchPoints > 0 ||
    navigator.msMaxTouchPoints > 0
  );
}

这种方法有两个问题

1. 它们是片状和不可靠的。我们只能测试浏览器实现的touch events的存在，但这并不一定意味着该设备具有触摸屏。
2. 您需要客户端JS才能运行，如果您进行交互取决于某些JS运行，那么当JS尚未下载时可能会导致经验不好。您希望这些测试在用户可以与页面进行交互后立即进行

现在，我们有一个实际的媒体查询来测试设备支持的指针。

语法看起来像这样

@media (pointer: none|coarse|fine) {
  /* Some code based on the supported pointer value */
}

该值是一个枚举，具有三个可能的值。

none

主要输入机制不包括指向设备。

coarse

主要输入机制包括一个精度有限的指向设备，例如触摸屏上的手指。

fine

主要输入机制包括一个准确的指向设备，例如鼠标。

使用此查询，我们可以为具有coarse指针的设备制作复选框和无线电按钮。

当然，我们还可以使用此查询从JS操纵我们的UI行为或负载完全不同的组件针对触摸与鼠标输入进行了优化。

如果您想知道“我可以在生产中使用它，这是如何支持的？”我对您有个好消息：该功能的caniuse表非常好，绿色！

MUI X UI库在其date picker组件中使用此方法。

希望您可以利用Web平台的这一新功能使您的UI代码更加优雅，我们的用户更快乐！