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

【问题标题】：Is it possible to exclusively target touch input devices?是否可以专门针对触摸输入设备？
【发布时间】：2022-01-19 12:41:03
【问题描述】：

我制作了一个悬停效果，在鼠标/键盘界面上效果很好，但在触摸界面上效果不是很好。我想通过某种媒体查询或将触摸输入设备与桌面设备分开的东西来定位触摸界面设备。

我会使用屏幕尺寸媒体查询，但有些平板电脑的尺寸与笔记本电脑的尺寸重叠。有没有办法使用 JavaScript 或纯 CSS 或其他方式来定位触摸界面设备？

【问题讨论】：

标签： javascript html css media-queries touch

【解决方案1】：

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

例如，悬停时的媒体查询会告诉您设备是否理解“正确”悬停。

这里有一个简单的 sn-p 来演示：

.hov:hover {
  color: black;
}

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

&lt;div class="hov"&gt;Hover over me&lt;/div&gt;

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

【讨论】：

【解决方案2】：

您可以使用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;
  }
}

&lt;div&gt;Hover me on PC&lt;/div&gt;

hover 属性仅针对具有鼠标（精细光标）的设备定义；

或者您可以使用
@media (pointer:coarse)

为触摸屏应用不同的属性

【讨论】：