唯一可靠方案是@media (hover: hover) and (pointer: fine)，因仅此组合能准确识别真实悬停能力，避免iPhone横屏误判、Surface Pro漏判及Android假hover问题，且获三大浏览器全面支持。
@media (hover: hover) and (pointer: fine) 是唯一可靠的检测组合
直接结论：不能用 max-width 或 pointer: coarse 判断是否支持悬浮，必须用 @media (hover: hover) and (pointer: fine) 包裹所有 :hover 样式。这是当前唯一被 Safari、Chrome、Firefox 全面支持且语义准确的方案。
原因很实在：iPhone 横屏时宽度可能超 1024px，但依然没 hover；Surface Pro 插着鼠标时哪怕 max-width: 480px，hover 也得生效。靠尺寸切，等于把交互逻辑交给运气。
常见错误现象：
-
@media (max-width: 768px) { .btn:hover { ... } }—— 在 iPad 横屏或桌面浏览器缩放到小窗口时误禁用 hover -
@media (hover: none) { ... }—— Safari 和旧版 Chrome 根本不识别该值，规则直接被忽略 -
@media (pointer: coarse) { ... }—— 会把 Surface Pro 等二合一设备当成纯触屏，砍掉真实鼠标体验
为什么不能只用 hover: hover 单独判断
单独写 @media (hover: hover) 有漏判风险：部分 Android 浏览器（如 Samsung Internet 17+）在触屏模式下错误报告 hover: hover，但实际不支持持续悬停——用户点一下才闪出 :hover，再点就没了。
立即学习“前端免费学习笔记（深入）”；
叠加 pointer: fine 就能筛掉这类“假 hover”设备，因为手指永远不属于 fine，只有鼠标、触控笔、轨迹球才符合。这个组合在 iOS 17+、Android Chrome 120+、Edge 115+ 中均稳定可用。
实操建议：
- 所有悬停增强样式（
transform、box-shadow、background-color变化）必须放在该媒体查询内 - 基础状态样式（如默认
.card外观）必须写在媒体查询外，保证无 hover 能力的设备也有可用样式 - 不要在该查询里写
display: none或visibility: hidden—— 它只控制“是否启用 hover”，不是“是否显示元素”
触摸设备上必须补足主动反馈，不能只删 :hover
禁用 hover 不是终点，而是起点。iOS Safari 默认禁用 :active，很多安卓机对 :active 响应延迟，导致用户点下去毫无视觉反馈，第一反应是“没点中”。
必须手动提供轻量级点击态：
- 给按钮加
cursor: pointer，触发 iOS 的:active激活机制 - 用
:active配合transition: background-color 0.1s，比transform: scale(0.95)更稳（后者在低端安卓上易掉帧） - 关键操作按钮可监听
touchstart动态加.is-pressedclass，避免伪类兼容问题 - 禁用
transition: all，只对明确属性做过渡，否则动画卡顿明显
SCSS 中封装 mixin 要注意作用域和回退逻辑
用 @mixin hover-effect 收口所有悬停样式是好习惯，但容易踩两个坑：一是 mixin 写在嵌套选择器里导致输出 CSS 层级过深；二是忘了基础样式仍需独立存在。
推荐写法：
@mixin hover-effect {
@media (hover: hover) and (pointer: fine) {
&:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0,0,0,0.1);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
}
}
.card {
// 基础样式始终生效
border-radius: 8px;
background: #fff;
// 悬停增强仅在支持设备上加载
@include hover-effect;
}
复杂点在于：这个媒体查询无法覆盖键盘焦点（:focus），而屏幕阅读器用户依赖它。所以 :focus 样式必须单独写，且不能包裹在同一个 @media 里——否则盲人用户在桌面端也看不到焦点环。
