css - 在触摸屏设备上禁用 CSS 规则

Question

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

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

当我将鼠标悬停在链接上时，会弹出一组子菜单。这工作正常，我对我的电脑没有任何提示。但是，您无法在移动设备上正确地将鼠标悬停在移动设备上，因此我想禁止在移动设备上弹出子菜单。

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

Answer 1

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

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

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 查询。