必须组合 hover 和 pointer 特性才能准确判断输入模式：@media (hover: hover) and (pointer: fine) 表示键鼠操作，@media (hover: none) and (pointer: coarse) 表示纯触控，且需用 matchMedia 动态监听切换。
不能靠单一媒体特性判断，必须组合 hover 和 pointer 两个特性，否则在 iPad、Surface 等混合设备上必然误判。
为什么 @media (hover: hover) 单独用会出错
它只表示“设备支持悬停”，但不反映当前正在用什么输入方式：iPad 连蓝牙鼠标时匹配，纯手指操作的安卓平板也可能因浏览器 bug 错报为 hover: hover；更糟的是，Windows 触控笔记本插着鼠标时仍报告 hover: hover，但用户正用手指点屏幕——这时你给:hover加菜单，点击后一闪就收，体验极差。
常见错误现象包括：
-
.nav-item:hover > .submenu在 iPhone 上偶尔闪现（iOS Safari 的兼容性行为） - 安卓平板分屏后菜单强行展开，挤得无法点击
- Surface 设备拔掉鼠标瞬间，CSS 没更新，菜单还挂着
@media (hover: hover) and (pointer: fine) 才是键鼠模式信号
这个组合同时要求：能悬停 + 主指针是高精度（鼠标/触控笔），排除了所有纯触控场景。它在以下情况生效：
立即学习“前端免费学习笔记（深入）”；
- iPad + 蓝牙鼠标（无论横竖屏、是否分屏）
- MacBook 触控板悬停
- Surface 接键盘+鼠标
不会在这些情况触发：
- iPhone / 纯触控安卓手机（
pointer: coarse） - 未接外设的 iPad（
pointer: coarse） - 安卓平板强制开启“触摸模式”（
pointer: coarse）
示例写法：
@media (hover: hover) and (pointer: fine) {
.nav-item:hover > .submenu { display: block; }
}
@media (hover: none) and (pointer: coarse) 对应典型触控操作
这个组合才真正逼近“此刻只能用手点”的状态：既没悬停能力，主指针又是粗粒度（手指）。它比单独 @media (hover: none) 可靠得多，因为后者可能被某些 Android 浏览器误报，或在 Surface 插鼠标时失效。
适合用于：
- 默认展开一级导航（不用 hover 触发）
- 设置
min-height: 44px点击区 - 显示 tooltip（不依赖悬停）
注意：@media (hover: hover) and (pointer: coarse) 是无效组合——W3C 明确规定二者互斥，永远不匹配。
动态响应输入方式切换必须用 window.matchMedia()
CSS 媒体查询本身是静态的，页面加载完就定死了。如果用户在 iPad 上先用手指，再连鼠标，样式不会自动更新。必须监听变化：
const mediaQuery = window.matchMedia('(hover: hover) and (pointer: fine)');
function handleInputChange(e) {
document.body.classList.toggle('has-mouse', e.matches);
}
mediaQuery.addEventListener('change', handleInputChange);
handleInputChange(mediaQuery); // 初始化
漏掉这一步，混合设备上的交互逻辑就始终脱节。这是最容易被忽略的复杂点：不是写对 CSS 就完事，还要让 JS 跟得上输入状态的实时变化。
