应使用@media (hover: hover) and (pointer: fine)包裹所有hover样式，而非依赖屏幕宽度或UA判断；需为触控设备补充:active、tap动画及:focus-within反馈，确保交互可感知。
直接用 @media (max-width: 768px) 或 UA 判断来禁用移动端 hover，是过时且不可靠的做法。真正有效的方式，是让浏览器自己报告它是否支持可靠的悬停能力——用 @media (hover: hover) and (pointer: fine) 包裹所有悬停相关样式。
为什么不能靠屏幕宽度或设备类型判断
Surface Pro、iPad Pro 这类二合一设备，宽度常超 1000px，但确实支持鼠标悬停；而某些折叠屏手机横屏时也满足 min-width: 1024px，却只有触摸输入。单靠尺寸或 UA 字符串，会误判真实交互能力。
- iOS 和安卓浏览器根本不会持续触发
:hover，最多在首次点击后短暂模拟一次，接着就丢弃状态 - 直接写
.card:hover在手机上点一下闪一下阴影，再点就没反应，甚至导致下拉菜单自动收起 - 部分安卓 WebView 因悬停样式反复重排，引发点击卡顿
正确写法：用能力检测包裹 hover 样式
只在明确支持精细指针 + 可靠悬停的设备上启用 hover 动画，其他设备默认回退到静态样式：
@media (hover: hover) and (pointer: fine) {
.card {
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}
}
- 所有 hover 相关属性（包括
transition）必须一起放进该媒体查询，否则基础样式里单独写的 transition 仍可能被解析，引发意外动画 - 不要用
@media (hover: none)去“清除”样式——很多安卓浏览器误报hover: hover，反而漏掉真实触屏设备 - 基础卡片样式（如默认边框、字体、padding）始终保留，确保移动端体验不降级
禁用 hover 后，必须补上触控反馈
删掉 hover 不等于完成适配。用户点下去没视觉变化，第一反应就是“没点中”。你需要主动提供替代反馈：
-
:active必须保留，但 iOS Safari 默认禁用它，需给元素加cursor: pointer或监听touchstart才能激活 - 关键按钮可加轻量 tap 动画：
transform: scale(0.95)，持续时间 ≤ 150ms，避免拖慢响应 - 用
:focus-within支持键盘导航：给卡片加tabindex="0"，内部有链接或按钮时，焦点进入即触发反馈 - 别清空
:focus样式——屏幕阅读器和键盘用户依赖它
检查你用的框架是否已内置该逻辑
Tailwind CSS v3.3+、Bootstrap 5.3+ 默认将 hover: 工具类包裹在 (hover: hover) and (pointer: fine) 中。但如果你用了自定义构建、老版本，或手写了大量 hover 类，就得手动补上媒体查询。
真正要禁的，从来不是“效果”，而是“不该出现的假设”。
