Disable CSS rule on devices with touch screens

Question

I am using this breadcrumb script on my website:

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

When I mouse over the links a set of sub-menus pop up. This works fine and I have no complaints on my PC. However, you can't properly mouseover on mobile devices, so I'd like to disable the popping up of the sub-menus on mobiles.

Is there a way to detect mobile devices that doesn't rely on pixel screen sizes in media queries? My problem here is not the screen size, but rather the input method. Thanks.

Answer 1

There is a new Level 4 Media Query that could very well become the way to do this.

The real magic is hover: hover, but here is some info on pointer: fine from MDN:

The primary input mechanism includes an accurate pointing device.

You could use the query like this:

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

Here is a test site where you can test the new @media queries against your device.