用CSS媒体查询区分触摸与鼠标设备

在前端开发内容学习中，如何用CSS媒体查询区分触摸与鼠标设备是常见主题。很多人在阅读时会遇到概念分散、步骤不清和注意点难以归纳的问题。本文按照基础概念、操作流程和关键细节，对相关内容进行整理。

@media (hover: none) and (pointer: coarse) 是最可靠的触控设备判断组合，精准识别“当前主输入为手指触控且无悬停能力”的状态，支持主流浏览器，需连写无空格、不可省略 :coarse，应配合 JS 监听 pointerdown 和 matchMedia 变化实现动态适配。

@media (hover: none) and (pointer: coarse) 是目前最可靠的触控设备判断组合

这个组合能准确捕获“当前主输入为手指触控、且无悬停能力”的状态，Safari 14.1+、Chrome 51+、Firefox 62+ 全面支持。它不是在问“有没有触摸屏”，而是在问“此刻是否只能靠点按操作”——这才是交互适配的真实依据。

常见错误现象：单独用 @media (hover: hover) 判断桌面，结果 Surface Pro 合盖触控时仍命中；用 @media (max-width: 768px) 把带触控的 Windows 笔记本当手机，导致下拉菜单无法展开。

• @media (hover: none) and (pointer: coarse) 必须写成连写形式，中间不能有空格（如 (hover: none)and(pointer: coarse) 是合法的，但加空格后部分旧版 Safari 可能失效）
• 不要漏掉 : coarse 的值，@media (pointer) 或 @media (pointer: ) 会整个规则无效
• 该组合不匹配 iPad 连妙控板或鼠标后的状态——这恰恰是优点，说明它响应的是真实输入模式，而非硬件静态属性

@media (hover: hover) and (pointer: fine) 才该启用:hover样式

把所有依赖悬停的交互逻辑（比如 a:hover、.dropdown:hover .menu）严格限定在这个媒体查询内。它排除了所有纯触控场景，也过滤掉了 Surface 等设备在触控模式下的误报。

为什么不能只靠 @media (hover: hover)？因为 iPadOS 和 ChromeOS 只要设备“有能力悬停”（哪怕只是插过一次鼠标），就始终返回 hover: hover，和当前操作方式无关。

• @media (hover: hover) and (pointer: fine) 中的 pointer: fine 是关键约束，确保只有鼠标、触控笔等高精度设备才触发
• Android WebView 4.4 及更早版本不支持 pointer，需 fallback 到 @media (max-width: 768px) 或 JS 检测（但仅作降级，不作主逻辑）
• 别在该媒体查询里写过渡动画时长过短（如 transition: all .08s），鼠标响应快，但触控设备一旦误入此分支，动画会显得突兀

JavaScript 必须补足 CSS 的动态盲区

CSS 媒体查询本身不会监听“用户从鼠标切到手指”的瞬间。首次 pointerdown 且 event.pointerType === 'touch' 时，应主动标记触控模式；同时监听 window.matchMedia('(hover: none)').matches 变化，比轮询高效得多。

容易踩的坑：'ontouchstart' in window 完全不可靠——Chrome 桌面版、Linux 浏览器、甚至某些 Electron 应用都返回 true，但它和物理触摸能力毫无关系。

• 优先使用 window.matchMedia('(hover: none) and (pointer: coarse)') 获取初始状态，而非 navigator.maxTouchPoints（已废弃）或 UA 字符串
• 不要给 body 加 touch-mode class 后再写一堆 .touch-mode .tooltip 样式——这会让 CSS 分支失控，且无法响应系统级指针切换
• 若需临时禁用某元素的 hover 行为，直接用 element.style.pointerEvents = 'none' 比改 class 更轻量、更及时

粗粒度指针（pointer: coarse）不等于“是手机”

@media (pointer: coarse) 匹配的是输入精度，不是设备类型。Surface Pro、Chromebook、甚至某些游戏手柄都会触发它。单独使用会导致按钮尺寸在桌面触控屏上被无故放大，却在 iPad 连键盘后失效。

典型误用：用它做整页布局切换。正确做法是仅调整交互密度——比如把按钮 min-height 提到 48px，把 padding 加到 12px，移除纯 :hover 触发的二级菜单。

• 避免在 @media (pointer: coarse) 下启用 transition，手指操作的起止不明确，过渡动画易显卡顿
• 如果产品必须区分“纯触控”和“混合设备”，唯一可行路径是组合 (hover: none) and (pointer: coarse) + JS 监听 pointerdown + 服务端 UA 辅助（仅用于首次加载兜底）
• 旧 Android WebView 不支持 pointer 特性，caniuse 显示兼容率约 94%，剩余 6% 场景建议用 @media (max-width: 480px) 作为视觉降级，而非功能降级

实际生效的关键不在写多少规则，而在理解浏览器上报的是“当前输入能力”，不是“设备出厂配置”。iPad 插上鼠标那一刻，@media (hover: hover) and (pointer: fine) 就会立刻接管样式——你写的 CSS 必须能承受这种切换，而不是假设“触控模式永远固定”。