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

Posted 2023-03-06

【中文标题】是否可以专门针对触摸输入设备？

【英文标题】：Is it possible to exclusively target touch input devices?

【发布时间】：2022-01-19 12:41:03

【问题描述】：

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

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

【参考方案1】：

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

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

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

.hov:hover 
  color: black;


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

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

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

【参考方案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;
  

<div>Hover me on PC</div>

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

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

为触摸屏应用不同的属性