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

Question

我做了一个悬停效果，在 mouse/keyboard 界面上效果很好，但在触摸界面上效果不佳。我想使用某种媒体查询或将触摸输入设备设置为远离桌面式设备的东西来定位触摸界面设备。

我会使用屏幕尺寸媒体查询，但有些平板电脑的尺寸与笔记本电脑的尺寸重叠。有没有一种方法可以使用 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

您可以通过查看某些功能来判断设备是否为触控设备。

例如，悬停时的媒体查询告诉您设备是否理解'proper'悬停。

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

.hov:hover {
  color: black;
}

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

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

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

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

Is it possible to exclusively target touch input devices?

javascript

html

css

media-queries

touch