在带触摸屏的设备上禁用 CSS 规则

Question

我在我的网站上使用这个面包屑脚本：

https://mtekk.us/archives/guides/vista-like-breadcrumbs-for-wordpress/

当我将鼠标悬停在链接上时，会弹出一组子菜单。这工作正常，我对我的电脑没有任何抱怨。但是，您不能在移动设备上正确地鼠标悬停，所以我想禁用移动设备上子菜单的弹出。

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

Answer 1

有一种新的 Level 4 Media Query 很可能成为 的方法。

真正的魔法是 hover: hover，但这里有一些来自 MDN 的关于 pointer: fine 的信息：

The primary input mechanism includes an accurate pointing device.

您可以像这样使用查询：

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

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