应使用@media (hover: hover) and (pointer: fine)组合判断键鼠模式，因单独hover: hover会误判混合设备，而pointer: fine才真实反映高精度输入状态，二者共存才是可靠信号。
用 (hover: hover) 和 (pointer: fine) 组合判断键鼠模式
单看 hover: hover 会把 iPad + 鼠标、Windows 触摸平板接键盘都识别为“支持悬停”，但它们实际交互方式不同；pointer: fine 才真正表示用户正在使用鼠标或触控笔这类高精度输入设备。两者同时成立，才是可靠的键鼠模式信号。
常见错误是只写 @media (hover: hover)，结果在 iPad 分屏（视口变窄）或安卓平板开启“强制触摸模式”时误判。正确组合如下：
@media (hover: hover) and (pointer: fine) {
.nav-item:hover > .submenu {
display: block;
}
}
- 这个规则不会在 iPhone 上触发（
hover: hover永远为 false） - 也不会在纯手指操作的安卓平板上触发（
pointer: coarse） - 但会在 iPad 连蓝牙鼠标、Surface 接键盘+鼠标、MacBook 触控板悬停时生效
为什么 (min-width: 768px) 单独不能区分平板模式
768px 是 iPad 第一代竖屏逻辑像素，现在已严重失准：iPad Pro 11 英寸横屏视口宽 834px，而某些安卓平板分屏后只剩 540px；更关键的是，同一台设备在系统缩放、浏览器缩放、折叠屏展开等场景下，min-width 值可能剧烈波动，但 hover 和 pointer 特性反映的是当前输入能力，更稳定。
如果你硬套 @media (min-width: 768px) 来启用桌面菜单，用户在 iPad 分屏后点开一个 600px 宽的窗口，菜单照样弹出——挤得根本没法用。
- 真实项目中应以“能力”而非“尺寸”为判断依据
- 宽度只作为辅助过滤项，比如加
and (min-width: 768px)避开小屏横屏干扰 - 不要用
max-width做主条件，它容易和移动端断点冲突
触控模式下如何避免 :hover 误触发
在仅支持 pointer: coarse 的设备（如 iPhone、大多数安卓手机、未接外设的 iPad）上，:hover 伪类行为不可靠：点击后短暂触发，松手即消失，导致子菜单闪一下就收起。
正确做法是彻底隔离交互逻辑：
/* 基础样式：所有设备默认隐藏子菜单 */
.nav-item > .submenu { display: none; }
<p>/<em> 键鼠模式才启用 hover 展开 </em>/
@media (hover: hover) and (pointer: fine) {
.nav-item:hover > .submenu { display: block; }
}</p><p>/<em> 触控模式靠 JS 控制 </em>/
.nav-item.is-open > .submenu { display: block; }</p>
-
display: none必须写在基础样式里，不能只放在媒体查询内，否则不支持 hover 的设备会常驻子菜单 - JS 切换
.is-open时，要移除其他同级项的该 class，防止多个菜单同时展开 - 别给
.nav-item加cursor: pointer，它在触控设备上无意义，还可能干扰点击热区
调试时怎么确认当前环境是否匹配键鼠模式
浏览器开发者工具的设备模拟器默认不模拟 hover 状态，Toggle device toolbar 无法验证 hover: hover 是否生效。
最直接的方式是在控制台运行：
window.matchMedia('(hover: hover) and (pointer: fine)').matches
返回 true 表示当前环境满足键鼠模式条件。你也可以监听变化：
const mql = window.matchMedia('(hover: hover) and (pointer: fine)');
mql.addEventListener('change', e => {
console.log('键鼠模式状态变更:', e.matches);
});
- 真机调试时，iOS Safari 对蓝牙鼠标的 hover 支持是禁用的，哪怕连了鼠标也始终返回 false
- Android Chrome 在启用“桌面站点”后可能返回
pointer: fine，但实际仍为触控主导，需结合用户行为做降级处理 - 这个组合特性在 iOS 15+ / Android 12+ 主流浏览器中已稳定支持，旧版本需 fallback 到宽度判断
实际项目中最容易被忽略的一点：hover 和 pointer 特性反映的是当前会话的输入能力，不是设备型号。同一台 iPad，插着鼠标是键鼠模式，拔掉就退回触控模式——你的 CSS 和 JS 必须能响应这种动态切换，而不是在页面加载时静态判断一次就完事。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
