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

Question

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

@media (hover: none) {
}

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

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

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

Answer 1

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

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

(pointer: fine) :只有鼠标指针(或类似指针)才会触发此媒体查询。此查询很有帮助，因为三星设备同时支持触摸和鼠标输入。
可能最好始终使用 (pointer: fine)除非您希望触摸事件在这些设备上触发悬停效果。