是否有可能专门针对触摸输入设备？

Question

我做了一个悬停效果，这将很好地工作在鼠标/键盘接口，但不是理想的触摸接口。我希望用某种媒体查询或将触摸输入设备从桌面样式的设备中分离出来的东西，将触控接口设备作为目标。

我会使用屏幕大小的媒体查询，但有些平板电脑的大小与笔记本电脑的尺寸重叠。有什么方法可以用JavaScript或纯CSS或其他方式瞄准触屏设备吗？

Answer 1

您可以使用pointer media查询来完成它：

​

div {
  padding: 8px;
  width: 200px;
  border: 1px solid;
}

@media (pointer:fine) {
  div:hover {
    cursor: pointer;
    background-color: red;
  }
}

@media (pointer:coarse) {
  div:active {
    background-color: green;
  }
}

<div>Hover me on PC</div>

​

hover属性仅为具有鼠标的设备(细光标)定义；

或者，您可以为触摸屏应用不同的属性。

@media (pointer:coarse)

Answer 2

您可以通过查看一些功能来感知设备是否是触摸设备。

例如，悬停上的媒体查询告诉您设备是否理解“适当”悬停。

这里有一个简单的片段来演示：

​

.hov:hover {
  color: black;
}

@media (hover: hover) {
  .hov:hover {
    color: red;
  }
}

<div class="hov">Hover over me</div>

​

但是，您可能需要仔细考虑要测试哪些功能，记住某些设备可能同时具有触摸和鼠标操作。