@media (hover: none) 不能精准判定触屏设备，仅表示无稳定悬停能力；正确组合是@media (hover: none) and (pointer: coarse)，它同时验证无悬停能力与主指针为粗粒度（手指），覆盖真实触控场景。
@media (hover: none) 不能精准判定“移动端触屏设备”，它只表示当前主输入机制不具备稳定悬停能力——这个信号在 Surface 插鼠标、Android 浏览器误报、iPadOS 接键盘等场景下会失效或漏判。
为什么单独用 @media (hover: none) 会出错
这个媒体查询匹配的是「无悬停能力」，不是「是触摸屏」：
-
hover: none在 iPhone、多数安卓手机上成立，但部分 Samsung Internet 旧版浏览器错误返回hover: hover，导致样式不生效 - Windows 触控笔记本（如 Surface）接了鼠标时仍报告
hover: hover，哪怕你正用手指点屏幕 - iPad Pro 外接 Magic Keyboard 后，
hover: hover成立，但用户可能随时切回手指操作——hover: none根本不会触发
@media (hover: none) and (pointer: coarse) 才是实际可用的组合
它同时验证两个关键事实：当前无悬停能力 + 主指针是粗粒度（即手指），这才是触控交互的真实状态：
- 被 Safari、Chrome、Firefox 全面支持，iOS 13.4+、iPadOS、Android Chrome 均能正确响应
- 排除了「带触控的桌面设备插着鼠标」这类干扰场景
- 适合用于：默认展开导航菜单、强制显示 tooltip、增大点击区域（如
min-height: 44px） - 不要写成
@media (hover: hover) and (pointer: coarse)——W3C 明确规定这两者互斥，永远不匹配
别用 'ontouchstart' in window 驱动 CSS
JS 检测返回 true 只说明浏览器注册了 touch 事件，不代表当前有物理触摸能力：
- Chrome 桌面版 DevTools 模拟器返回
true，但显然不是触屏 - 某些 Linux 桌面浏览器也返回
true，却无任何触摸硬件 - 它和
@media (hover: none)不等价：Surface Pro 可能同时满足'ontouchstart' in window === true和@media (hover: hover)
混合设备需要 JS 动态监听，不是一次判断就够
用户可能在同一个页面里插拔鼠标、切换键盘、从触控切到 Apple Pencil——媒体查询本身是静态的：
- 用
window.matchMedia('(hover: hover) and (pointer: fine)')监听变化 - 配合
addEventListener('pointerdown', ...)捕获首次触控，临时增强反馈 - 真正难处理的是输入方式切换瞬间的样式抖动，这点容易被忽略；
matchMedia的addListener或现代addEventListener('change')是必须项，不是可选项
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
