css - 如何定位带触摸屏/无鼠标的设备？

Question

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

    }
  }
}

下面是我试过的代码，但是好像没有任何效果

Answer 1

虽然不能直接检测鼠标是否存在(触摸屏笔记本电脑仍然可以有鼠标，毕竟)，但可以使用媒体查询!

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

这会检测粗指针(例如手指)当前是否是主要 设备。如果您想检查任何设备是否粗糙，您可以使用以下方法。

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

如果您尝试定位不是触摸屏或类似设备的设备，请使用pointer: fine 或any-pointer: fine .

此外，还有 @media (hover)，尽管 Firefox 目前不支持它(根据 MDN )。

编辑:经过仔细检查，Firefox 似乎也不支持 pointer 或 any-pointer ☹