Question

我正在我的网站上使用此面包屑脚本：

当我将鼠标悬停在链接上时，会弹出一组子菜单。这可以正常工作，并且我在PC上没有任何抱怨。但是，您无法在移动设备上正确地将鼠标悬停在鼠标上，因此我想禁止在移动设备上弹出子菜单。

有没有一种方法可以检测不依赖媒体查询中像素屏幕尺寸的移动设备？我的问题不是屏幕尺寸，而是输入法。谢谢。

Answer 1

有一个新的Level 4 Media Query很可能成为实现此目的的方法。

真正的魔力是hover: hover，但这是MDN中有关pointer: fine的一些信息：

主要输入机制包括一个精确的指点设备。

您可以使用如下查询：

@media(hover: hover) and (pointer: fine) {
  .navigation-main ul li:hover>ul {
    display:block;
  }
}

这里是test site，您可以在其中针对设备测试新的@media查询。