@media (hover: hover) and (pointer: fine) 是当前最可靠的混合设备悬停判断方案，它同时验证设备具备悬停能力且当前主输入为精细指针，能准确排除纯触控场景。
为什么 @media (hover: hover) 在 iPad 和 Surface 上永远为 true
这不是浏览器 bug，是规范强制行为：只要设备“有能力悬停”（比如插过蓝牙鼠标、带触控板、甚至只是系统上报了该能力），hover: hover 就必须返回 true。iOS 13.4+、iPadOS、ChromeOS 全部照做——哪怕你正用手指点屏幕，matchMedia('(hover: hover)').matches 仍是 true。单靠它区分触摸/鼠标，等于默认放弃 Surface Pro、Galaxy S22、MacBook Touch Bar 这类混合设备。
真正可用的判断组合是 @media (hover: hover) and (pointer: fine)
这条规则才是当前最可靠守门员，它同时验证两个条件：
-
hover: hover→ 设备具备悬停能力 -
pointer: fine→ 当前主输入方式是精细指针（鼠标、触控笔），不是手指或触控板
它自动排除所有纯触控场景，也规避了 (hover: none) and (pointer: coarse) 的兼容性风险（后者在旧版 Safari 中支持不稳定）。实际用法示例：
@media (hover: hover) and (pointer: fine) {
.nav-item:hover { background-color: #f0f0f0; }
.dropdown-trigger:hover .dropdown-menu { display: block; }
/* transition 也得包进来，否则 iOS Safari 可能解析到但不触发 */
.button { transition: transform 0.1s, box-shadow 0.15s; }
}
注意：@media (hover: hover) and (pointer: coarse) 永远不匹配——W3C 明确规定这两者互斥，别写。
移动端点击必须有 :active 替代反馈，且 iOS Safari 要手动激活
禁用 :hover 不等于完成响应式。用户点下去没视觉变化，会怀疑没点中。而 :active 是移动端唯一原生瞬时反馈机制，但它在 iOS Safari 默认不生效，除非满足以下任一条件：
- 元素或其任意祖先绑定了
touchstart事件（最简做法：） - 元素是
<button></button>或带role="button"且有tabindex
动画持续时间建议 ≤ 0.15s；只改背景色容易被忽略，推荐组合 transform: scale(0.98) + opacity: 0.8；若父容器设了 overflow: hidden，缩放可能被裁掉。
JS 协同降级：监听 pointerdown + matchMedia 动态切换
CSS 媒体查询无法响应“用户从鼠标切到手指”的瞬间。需要 JS 补位：
- 首次
pointerdown且event.pointerType === 'touch'时，可临时标记isTouching = true - 监听
window.matchMedia('(hover: hover) and (pointer: fine)')的change事件，比轮询高效 - 不要用
ontouchstart全局监听——现代 iOS 已禁用该属性检测，且易引发滚动干扰
复杂点在于：X5 内核（微信安卓版）、UC、QQ 浏览器基本忽略 pointer: fine，所以所有依赖该媒体查询的样式都只能作为渐进增强，不能当功能开关用。核心交互逻辑（如下拉菜单显隐）仍需 JS 控制。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
