@media (hover: hover) and (pointer: fine) 是唯一能安全启用 hover 样式的组合条件，它精准识别当前是否有鼠标/触控笔悬停，而非仅判断设备是否支持悬停；单独使用 @media (hover: hover) 不可靠，因 ipados、chromeos 等混合设备即使正用手指操作也返回 hover: hover，导致 hover 效果误触发或延迟。
@media (hover: hover) and (pointer: fine) 是唯一能安全启用 hover 样式的组合条件，它不判断“是不是触屏”，而是精准识别“当前是否真有鼠标/触控笔在悬停”。
为什么单独 @media (hover: hover) 完全不可靠
它只反映设备「具备悬停能力」，不是「此刻正在悬停」：iPadOS、ChromeOS、Surface Pro 插着鼠标时都返回 hover: hover，哪怕你正用手指点屏幕；旧版 Samsung Internet 甚至在纯触控手机上也误报 hover: hover。结果就是下拉菜单在 iPad 上点一下才闪现、按钮 hover 动画在触控时卡半秒又消失。
@media (hover: hover) and (pointer: fine) 才是守门员
这个组合同时满足两个硬条件：
-
hover: hover：设备声明支持悬停（排除 iPhone、多数 Android 手机） -
pointer: fine：当前活跃指针是精细类型（排除手指、遥控器、游戏手柄）
只有鼠标、触控笔这类输入设备才能同时满足——所以它天然过滤掉所有纯触屏和混合设备的触控场景。把所有 :hover 样式包进这个媒体查询里，比如：
@media (hover: hover) and (pointer: fine) {
.nav-item:hover .dropdown {
display: block;
}
.card:hover {
transform: translateY(-4px);
}
}
@media (hover: none) and (pointer: coarse) 用于触控优化
这不是“检测触屏”，而是捕获「此刻只能触控」的真实状态：
-
hover: none排除所有能悬停的设备（包括 Surface 插着鼠标时） -
pointer: coarse确认当前主指针是粗粒度（手指）
二者同时成立，基本可认定用户正用手指操作。适合用来默认展开导航、显示 tooltip、设置 min-height: 44px 点击区。别单独用 pointer: coarse——桌面触控屏连了蓝牙鼠标后，它可能从 coarse 切回 fine，但你的 CSS 不会自动重算。
别碰 ontouchstart 和 UA 字符串
这些 JS 检测不能驱动 CSS 分支：
-
'ontouchstart' in window在 Chrome 桌面版、Edge 模拟器里也返回true，和物理触摸无关 -
navigator.userAgent.includes('Mobile')被很多桌面浏览器故意注入，毫无区分力 - 它们无法响应输入方式的动态切换（比如 iPad 拔掉鼠标瞬间）
CSS 媒体查询在渲染前就生效，且被 Chrome 51+、Firefox 62+、Safari 14.1+ 全面支持——没必要用 JS 绕远路。
真正复杂的是混合设备：Surface Pro、iPad 连键盘、Chromebook 插鼠标……它们的 hover 和 pointer 值会随硬件连接状态实时变化，而 CSS 本身无法监听这种切换。如果业务强依赖“当前输入模式”，必须用 window.matchMedia 监听 + pointerdown 事件做动态 class 注入，而不是指望一条媒体查询一劳永逸。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
