三星设备（Samsung Galaxy S22）错误地处理 CSS @media hover查询

原文地址：https://segmentfault.com/a/1190000044477981
作者：Fw恶龙
本文首发于：思否

遇到的问题：三星设备（Samsung Galaxy S22）错误地处理 CSS @media hover查询

以下样式我们预期是只在支持悬停输入的情况下显示（即PC端鼠标悬停交互时显示），而在三星设备上该样式也会生效

@media (hover: hover)
  a:hover
    background yellow

原因

Samsung 触摸屏向底层系统报告它既是触摸屏又是鼠标（类似支持触摸的笔记本电脑），在触摸屏上的输入被处理为鼠标输入（即支持鼠标悬停操作），进而导致以上样式代码生效。

解决

将以上代码进行修改，在当前设备支持悬停操作且输入机制是精确的输入设备（如鼠标）时才生效

@media (hover: hover) and (pointer: fine)
  a:hover
    background yellow

开发注意事项

如今设备存在多种输入方式（如：支持触摸的平板电脑、支持蓝牙鼠标的手机、支持手写笔的设备），开发时需考虑这种情况
主要输入设备的识别当前没有统一的规范，它不一定就是当前用户正在使用的输入设备
对于只在悬停下才出现的功能，需要考虑为其提供兜底方案（如：点击操作）

hover属性值介绍

@media hover属性

none：主要输入机制无法悬停
hover：主要输入机制可以悬停

@media pointer 属性

none：主要输入机制不包括输入设备
coarse：主要输入机制包括精度有限的输入设备，例如触摸屏上的手指
fine：主要输入机制包括精确的输入设备，例如鼠标

@media any-hover属性

none：可用的输入机制里均无法悬停
hover：可用的输入机制里有≥1个的可悬停的输入机制
暂不推荐使用，各个设备识别情况出入较大

@media any-pointer 属性

none：没有可用的输入机制
coarse：有≥1个的精度有限的输入机制
fine：有≥1个的精确的输入机制
暂不推荐使用，各个设备识别情况出入较大

测试结果

• 测试当前设备的支持情况
• 不同设备下的测试结果

相关链接

• 三星设备错误地处理 CSS@media hover查询 | Samsung devices incorrectly handle CSS @media hover queries
• 互动媒体的特点及其潜力(针对错误的假设) | Interaction Media Features and Their Potential (for Incorrect Assumptions)
• 张鑫旭 | CSS any-hover any-pointer media查询与交互体验提升
• HoverSupported.css

• segmentfault | 浅谈 :hover 伪类选择器在 touch 环境如何禁止生效的问题

  • 提供了JS解决方案