单独用@media (hover: hover)会失效，因混合设备只要支持悬停就恒返回true，与当前是否触控无关；正确写法是@media (hover: none) and (pointer: coarse)兜底触屏，@media (hover: hover) and (pointer: fine)限定精细输入，且需配合js监听与:focus/:active统一交互反馈。
为什么单独用 @media (hover: hover) 会失效
因为 iPad、Surface 等混合设备只要“能接鼠标”，就恒返回 (hover: hover) 为 true，和当前是否在触控完全无关。它只表示“设备支持悬停”，不是“此刻正在悬停”。单独写这条规则，等于在所有 iPad 上都启用鼠标样式，触控用户点第一下后菜单卡住、按钮高亮不消失，交互全乱。
@media (hover: none) and (pointer: coarse) 才是触屏兜底关键
这个组合才是目前最稳定、浏览器兼容性最好的触屏判断依据——它真正对应“此刻只能用手指点按”的状态。Safari 14.1+、Chrome 51+、Firefox 62+ 全支持，且动态响应输入切换（比如 iPad 拔掉妙控板瞬间就切回该媒体查询）。
如果你了解HTML，CSS和JavaScript，您已经拥有所需的工具开发Android应用程序。本动手本书展示了如何使用这些开源web标准设计和建造，可适应任何Android设备的应用程序 - 无需使用Java。您将学习如何创建一个在您选择的平台的Android友好的网络应用程序，然后转换与自由PhoneGap框架到一个原生的Android应用程序。了解为什么设备无关的移动应用是未来的潮流，并开始构建应用程序，提供更
- 必须带值：
@media (hover: none) and (pointer: coarse)，漏掉任一值或写成(hover)整条规则被忽略 - 别把它当“手机检测”：游戏手柄、遥控器也会触发
pointer: coarse，但它们不需要增大按钮；所以重点仍是交互逻辑调整，而非设备归类 - 典型用法：
button { min-height: 48px; padding: 12px; }、移除.nav-item:hover > .submenu、禁用transition: all .2s（手指操作延迟明显，过渡反而卡顿）
@media (hover: hover) and (pointer: fine) 是鼠标/触控笔专属区
只有这个组合才表示“当前主输入是鼠标或触控笔，且支持悬停”，能精准排除纯触控场景。它不是“桌面端开关”，而是“精细输入能力开关”——Surface 插着鼠标时命中，拔掉后自动退出。
- 所有
:hover样式必须包在里面，否则 iOS Safari 可能在首次点击后残留悬停态 -
transition属性也得放进去，否则移动 Safari 解析到但不用，动画白写 - 别写
@media (hover: hover) and (pointer: coarse)：W3C 明确规定这两者互斥，永远不匹配
触屏交互不能只靠 CSS 媒体查询
媒体查询只反映“当前输入能力”，不解决“用户点了没”。比如下拉菜单，在触屏上必须靠 JS 监听 pointerdown 或 click 切换状态；而 :focus 和 :active 要始终存在，且样式逻辑与 :hover 一致（比如同样变背景色），否则键盘用户和触屏用户看到的反馈不统一。
- 所有可交互元素必须有
:focus样式，且满足 WCAG 焦点可见性要求（如 2px 蓝色轮廓） - 避免用
:hover控制display: none → block：触屏上首次点击可能只触发一次:hover，菜单闪一下就消失 - JS 动态监听更可靠：
window.matchMedia("(hover: none) and (pointer: coarse)").matches可实时获取状态，外接鼠标时也能热插拔响应
:hover、:focus、:active 的视觉变化逻辑完全对齐，且所有依赖悬停的功能都有点击/聚焦 fallback。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
