如何获取当前设备的CSS 'pointer' 属性值？

嘿，我刚好知道怎么搞定这个需求！你可以借助JavaScript的window.matchMedia() API来直接检测当前设备匹配的CSS pointer媒体属性值，这就是你之前可能用过的简便方法。

核心实现代码 #

下面是一个可以直接使用的函数，用来获取当前的指针类型：

function getCurrentPointerType() {
  // 依次检测不同的pointer媒体查询
  if (window.matchMedia('(pointer: fine)').matches) {
    return 'fine';
  } else if (window.matchMedia('(pointer: coarse)').matches) {
    return 'coarse';
  } else if (window.matchMedia('(pointer: none)').matches) {
    return 'none';
  }
  // 兜底返回未知类型
  return 'unknown';
}

// 调用示例
console.log('当前设备的指针类型:', getCurrentPointerType());

各指针类型的含义 #

• fine：对应精确的指针设备，比如鼠标、触控笔这类可以精准定位的输入方式
• coarse：对应不精确的指针设备，比如触摸屏上的手指操作
• none：表示当前没有可用的指针输入设备

监听指针类型变化 #

如果需要实时监测指针类型的变化（比如用户从鼠标切换到触摸操作），可以添加监听事件：

// 创建媒体查询列表
const pointerQueryList = window.matchMedia('(pointer: fine), (pointer: coarse), (pointer: none)');

// 定义变化处理函数
function handlePointerChange() {
  console.log('指针类型已更新:', getCurrentPointerType());
}

// 添加监听
pointerQueryList.addEventListener('change', handlePointerChange);

这个方法兼容性很好，几乎所有现代桌面和移动浏览器都支持，完全可以满足你的需求。

内容的提问来源于stack exchange，提问作者Anthony