如何定位带有触摸屏/没有鼠标的设备？

Question

@media (hover: none) {
  main {
    a {
      display: none;

    }
  }
}

这是我尝试过的代码，但似乎没有任何作用

Answer 1

尽管不能直接检测鼠标是否存在（毕竟，触摸屏笔记本电脑仍然可以有鼠标），但是可以使用媒体查询！

@media (pointer: coarse) {
  /* rules */
}

这将检测当前 primary 设备是否使用粗略的指针（例如手指）。如果要检查任何设备是否粗糙，可以使用以下内容。

@media (any-pointer: coarse) {
  /* rules */
}

如果您要定位没有触摸屏或类似设备的设备，请使用pointer: fine或any-pointer: fine。

此外，还有@media (hover)，尽管Firefox当前不支持（按MDN）。

编辑：仔细检查，似乎Firefox既不支持pointer也不支持any-pointer☹