@media (hover: none) and (pointer: coarse) 是最可靠判断“当前只能触控”的纯CSS方案：hover: none 排除悬停能力，pointer: coarse 确认主输入为手指，二者缺一不可，且需写为无空格形式以兼容旧版Safari。
@media (hover: none) and (pointer: coarse) 是目前最可靠、浏览器支持最广的纯 CSS 方式，它不依赖 JS，渲染前即生效，且能准确反映“当前只能靠手指操作”的真实状态。
为什么不能只用 @media (hover: none)
单独匹配 hover: none 只说明设备没有悬停能力，但不等于“正在触控”：部分 Android 浏览器（如旧版 Samsung Internet）错误报告 hover: hover，导致漏判；而 Windows 触控笔记本（如 Surface）接鼠标时仍返回 hover: hover，哪怕你正用手指点屏幕。它判断的是能力模型，不是输入行为。
为什么 @media (pointer: coarse) 也不能单独用
pointer: coarse 表示当前活跃指针是粗粒度（比如手指），但它可能被遥控器、游戏手柄甚至某些触控笔触发——这些都不是典型“触摸屏交互”。更关键的是，iPad 连蓝牙鼠标后，pointer 会从 coarse 切到 fine，单靠它无法稳定锁定触控场景。它适合调点击区域大小，不适合当“是否是触摸屏”的开关。
必须组合使用，并注意语法细节
组合条件 @media (hover: none) and (pointer: coarse) 才真正逼近“此刻只能触控”的判断逻辑：
- 两者必须同时成立，缺一不可——
hover: none排除有悬停能力的设备，pointer: coarse确认主输入是手指 - 不要加空格在
and前后，写成@media (hover: none)and(pointer: coarse)更稳妥（某些旧版 Safari 对空格敏感） - 绝对不要写
@media (hover: hover) and (pointer: coarse)，W3C 明确规定这两者互斥，永远不匹配 - 这个组合在 Chrome 51+、Firefox 62+、Safari 14.1+ 全面支持，iOS 13.4+ 和 ChromeOS 也已修复早期误报问题
复杂点在于输入方式可能动态切换
CSS 媒体查询本身是静态的，页面加载时求值一次就固定了。但用户可能在 iPad 上先用鼠标，再拔掉鼠标改用手指——这时样式不会自动更新。真正要处理这种混合设备，得靠 window.matchMedia() 监听变化，并配合 pointerdown 事件做临时标记。这点容易被忽略，却恰恰是触控交互体验的关键分水岭。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
