pointer媒体查询不能区分当前输入方式，仅反映设备指针能力类型（fine或coarse），且不随连接状态实时变化；精准识别鼠标/触控笔需组合hover: hover和pointer: fine。
pointer媒体查询不能“区分当前输入方式”
它只反映设备的pointer能力类型（fine 或 coarse），不是实时输入源。iOS Safari、Chrome for Android 等主流移动浏览器在手指触控时始终返回pointer: coarse，哪怕你刚插上蓝牙鼠标——页面加载时已按该值计算并应用样式，不会动态重排。
更关键的是：@media (pointer: fine) 在真机上几乎永不匹配；@media (pointer: coarse) 又会把所有手机、平板、甚至带触控笔的 Surface 全归为一类，毫无区分度。
- Android WebView 和旧版 Samsung Internet 完全不支持
pointer查询，整条规则被忽略 - iOS Safari 13.4+ 支持但硬编码返回
coarse，连妙控板或 Apple Pencil 都无法触发fine - 它不随设备连接状态变化实时响应：拔掉鼠标后，页面不会自动切回
coarse样式
真正能区分鼠标与触控的组合写法是 hover + pointer
单独用 @media (hover: hover) 会把 iPad、S22、Surface 等混合设备全判为“支持悬停”，导致 :hover 状态卡住不收。必须叠加 pointer: fine 才能精准锚定鼠标/触控笔这类精细输入设备：
@media (hover: hover) and (pointer: fine) {
.menu > li:hover > .submenu {
display: block;
}
.btn {
transition: background-color 0.2s, box-shadow 0.2s;
}
}
- 这条规则在 iOS Safari 13.4+、Chrome 82+、Firefox 68+ 中表现稳定
- 旧版微信 X5 内核、UC、QQ 浏览器直接忽略，属渐进增强，不可作为功能开关
- 务必把
transition也包进媒体查询里，否则 Safari 可能解析到过渡但不触发:hover，引发 Vue/React 组件重渲染异常动画
移动端点击反馈不能依赖 :hover，得靠 :active + touchstart
iOS Safari 默认不触发 :active，除非元素满足以下任一条件：
- 绑定了
touchstart事件（最简做法：） - 是原生
<button></button>或带role="button"且有tabindex
:active 动画建议控制在 ≤ 0.15s，只改背景色易被忽略，推荐组合 transform: scale(0.98) + opacity: 0.8；若父容器设了 overflow: hidden，缩放可能被裁切。
cursor: pointer 不是“优化”，而是基础语义信号
它必须写在可点击元素自身上，不是父容器；伪类 :hover 里写最稳妥，避免未加载完成就显示小手造成误判。
-
cursor: hand是 IE 私有值，已废弃，一律用cursor: pointer - 自定义光标如
url("icon.cur"), auto必须带 fallback（逗号后那个），否则路径失效时变默认箭头 - 用了
pointer-events: none，再设cursor也无效——元素对鼠标完全透明 - 移动端 Safari 对部分自定义光标支持有限，
pointer是唯一安全选项
复杂点在于：pointer 是静态能力描述符，而用户此刻到底用手指点、还是正用鼠标操作 iPad，CSS 本身无从感知。真正要做的，是放弃用它“区分”，转而用 (hover: hover) and (pointer: fine) 守住精细输入场景，并为所有触控路径补上 :active 和语义化标记（role、tabindex）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
