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,333
  • 6
  • 33
  • 54

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
  • 17,102
  • 4
  • 37
  • 55
  • 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