正确写法是@media (hover: hover) and (pointer: fine)，它要求主输入机制既支持悬停又属精细类型，可排除手指触摸等粗粒度场景，避免:hover粘滞；需配合:active反馈和JS降级兜底。
用 @media (hover: none) 判断不支持悬停的设备
这不是在“判断是否是移动端”，而是在判断当前设备有没有能力维持 :hover 状态——绝大多数触屏设备（iOS/Android）返回 hover: none，因为它们没有指针悬停模型。这个媒体查询比靠屏幕宽度、UA 字符串或 ontouchstart 更可靠。
常见错误现象：
– 写 @media (max-width: 768px) { ... } 给“移动端”加样式，结果带触摸屏的 Windows 笔记本也套用了触屏逻辑
– 用 navigator.userAgent.includes('Mobile')，但某些桌面浏览器 UA 里也带 Mobile 字样
-
@media (hover: none)匹配的是「无 hover 能力」设备，包括 iPhone、iPad（默认）、多数 Android 手机和平板 -
@media (hover: hover)才匹配支持 hover 的设备（如鼠标+触摸屏共存的二合一笔记本） - 它不依赖 JS，渲染前就生效，且被所有现代浏览器支持（Chrome 51+、Firefox 62+、Safari 14.1+）
别用 'ontouchstart' in window 做 CSS 设备判断
这个 JS 检测常被误用于样式分支，但它只说明浏览器“注册了 touchstart 事件”，不代表设备有物理触摸能力——Chrome 桌面版、Edge 开发者工具模拟器、甚至某些 Linux 桌面浏览器都返回 true。把它塞进 class 或 data 属性再写 CSS，会污染 DOM 且不可靠。
为什么这样做：
– 'ontouchstart' in window 是运行时 JS 特性检测，不能用于纯 CSS 分支
– 它和 hover: none 不等价：一台 Surface Pro 同时满足 'ontouchstart' in window === true 和 @media (hover: hover)
立即学习“前端免费学习笔记（深入）”；
- 如果必须用 JS 辅助，优先用
navigator.maxTouchPoints > 0（更接近硬件能力） - 但 CSS 层面，坚持用
@media (hover: none)或@media (pointer: coarse)，不要混用 JS 检测结果驱动样式
@media (pointer: coarse) 只回答“是否有粗精度指针”
它不是“移动端开关”，而是告诉你当前活跃输入设备是否为粗粒度（比如手指），而非细粒度（比如鼠标、触控笔）。它的值是 coarse、fine 或 any，且可能随用户切换输入方式动态变化（例如 iPad 连蓝牙鼠标后，pointer 可能从 coarse 切到 fine）。
- 适合场景：调整点击区域大小（
min-height: 44px）、禁用 hover 动画、替换图标 hover 状态为 tap 状态 - 不适合场景：当作“是否是手机”的布尔开关——桌面触控屏、游戏手柄、甚至某些遥控器也会触发
pointer: coarse - 它和
hover: none常一起用：@media (hover: none) and (pointer: coarse)更精准覆盖典型触屏交互
真实项目中怎么组合使用
单一媒体查询解决不了所有问题。比如一个按钮需要：桌面悬停变色 + 触屏点击反馈 + 触屏长按显示菜单。这时候得叠加逻辑，而不是只靠一个条件。
- 基础悬停增强（仅桌面）：
@media (hover: hover) { .btn:hover { background: #eee; } } - 触屏点击反馈（所有设备）：
.btn:active { opacity: 0.7; }（注意：iOS Safari 需要-webkit-tap-highlight-color: transparent配合） - 触屏专用交互（如隐藏下拉箭头）：
@media (hover: none) { .select-trigger::after { display: none; } } - 避免样式冲突：不要写
@media (max-width: 768px) { .btn:hover { ... } }，它和@media (hover: hover)逻辑重叠且不可靠
最易被忽略的一点：Safari on iOS 15.4+ 默认禁用 :hover，即使设备支持（比如启用了辅助功能里的指针控制），普通用户也看不到效果。所以任何依赖 :hover 的核心交互（比如导航展开、表单验证提示）必须有 :focus 或 :active 的降级路径，不能只靠媒体查询“隔离”就完事。
