CSS 媒体查询检测三星设备是否支持悬停的问题

Question

我想使用纯CSS为不支持悬停的设备提供不同的行为。这在iOS和谷歌设备上很容易实现：

@media (hover: none) {
}

然而，Android设备似乎并不像我期望的那样支持此功能。这是一个简单的测试案例：https://codepen.io/kylegordy/pen/abOLbXV。

我期望在支持悬停的设备（如桌面）上全部显示绿色，在不支持悬停的设备上全部显示红色。但是，三星手机两个悬停媒体查询都失败了。

似乎我们可以通过测试 pointer: coarse 来解决这个问题，但这并不是我们实际想要测试的，所以我不太愿意将其作为解决方法。还有其他解决方案应该考虑吗？

- Karptonite

---

这个回答解决了你的问题吗？如何在触摸设备上删除/忽略:hover CSS样式。 - DarkKnight

Answer 1

目前我正在使用与您提到的相同的解决方案：

@media (hover: hover) and (pointer: fine) {
  ...
}

(pointer: fine)：只有鼠标指针（或类似设备）才会触发此媒体查询。这个查询很有用，因为三星设备支持触摸和鼠标输入。

除非你想在这些设备上触发悬停效果，否则最好始终使用(pointer: fine)。

- mleister