Firefox中Hover/Pointer媒体查询无法正常工作问题求助

• 已安装无插件的Firefox便携版，问题仍未解决
• PC仅连接鼠标和键盘
• 左侧为Firefox显示效果，右侧为Chrome显示效果：
  

相关代码 #

CSS代码 #

div {
    background: green;
  }

@media screen and (hover: hover) {
  div {
    background: red;
  }
}
  
@media screen and (pointer: fine) {
    div {
      background: blue;
    }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <div>asdfa</div>
</body>
</html>

回答 #

这大概率是Firefox对pointer: fine媒体查询的识别问题，也有可能是便携版的特殊配置导致异常。

你的代码逻辑是：默认背景为绿色，当设备支持悬停（hover: hover）时切换为红色，当设备具备精确指针（pointer: fine，比如鼠标）时切换为蓝色。由于两个媒体查询优先级相同，后声明的pointer: fine规则应该覆盖前者，最终显示蓝色，这也是Chrome的正常表现。

如果Firefox没有触发pointer: fine规则，可以做这些排查：

• 换用普通安装版Firefox测试，排除便携版的配置异常
• 在Firefox地址栏输入about:config，确认dom.w3c_pointer_events.enabled已设为true
• 打开浏览器控制台，执行window.matchMedia('(pointer: fine)').matches，查看返回值是否为true——如果是false，说明Firefox没有正确识别你的鼠标设备

内容的提问来源于stack exchange，提问作者Tom M