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

Question

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

@media (hover: none) {
}

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

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

似乎我们可以通过 testing 来解决这个问题pointer: coarse，但这并不是我们真正想要测试的，所以我不愿意使用它作为一种解决方法。我应该考虑其他一些解决方案吗？

Answer 1

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

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

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

可能最好始终使用 ，(pointer: fine)除非您希望触摸事件在这些设备上触发悬停效果。