2

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.

posfan12
  • 2,541
  • 8
  • 35
  • 57

1 Answers1

2

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.

Andy Hoffman
  • 18,436
  • 4
  • 42
  • 61
  • What is the best fallback method for old browsers? – posfan12 Apr 10 '19 at 21:39
  • 1
    @posfan12 For older browsers, it looks like JavaScript is the best way to go, though it's imperfect. The **Update 2018** part of [this](https://stackoverflow.com/questions/4817029/whats-the-best-way-to-detect-a-touch-screen-device-using-javascript/4819886#4819886) answer is what I'd do for older browser support. – Andy Hoffman Apr 10 '19 at 22:55