Detecting that the browser has no mouse and is touch-only

by

As of 2018 there is a good and reliable way to detect if a browser has a mouse (or similar input device): CSS4 media interaction features which are now supported by almost any modern browser (except IE 11 and special mobile browsers).

W3C:

The pointer media feature is used to query the presence and accuracy
of a pointing device such as a mouse.

See the following options:

    /* The primary input mechanism of the device includes a 
pointing device of limited accuracy. */
    @media (pointer: coarse) { ... }
    
    /* The primary input mechanism of the device 
includes an accurate pointing device. */
    @media (pointer: fine) { ... }
    
    /* The primary input mechanism of the 
device does not include a pointing device. */
    @media (pointer: none) { ... }

    /* Primary input mechanism system can 
       hover over elements with ease */
    @media (hover: hover) { ... }
    
    /* Primary input mechanism cannot hover 
       at all or cannot conveniently hover 
       (e.g., many mobile devices emulate hovering
       when the user performs an inconvenient long tap), 
       or there is no primary pointing input mechanism */
    @media (hover: none) { ... }
    
    /* One or more available input mechanism(s) 
       can hover over elements with ease */
    @media (any-hover: hover) { ... }
    
    
    /* One or more available input mechanism(s) cannot 
       hover (or there are no pointing input mechanisms) */
    @media (any-hover: none) { ... }

Media queries can also be used in JS:

if(window.matchMedia("(any-hover: none)").matches) {
    // do something
}

Related:

W3 documentation: https://www.w3.org/TR/mediaqueries-4/#mf-interaction

Browser support: https://caniuse.com/#search=media%20features

Similar problem: Detect if a client device supports :hover and :focus states

More Related Contents:

  1. How do I simulate a hover with a touch in touch enabled browsers?
  2. Preserve browser window aspect ratio while shrinking [closed]
  3. Change from (+) symbol to (-) after click (function(){
  4. How can i create html automatic change page? [duplicate]
  5. How to get an HTML element’s style values in javascript?
  6. Change :hover CSS properties with JavaScript
  7. Prevent zoom cross-browser
  8. Changing element style attribute dynamically using JavaScript
  9. How to get browser width using JavaScript code?
  10. How can you figure out the highest z-index in your document?
  11. How to ensure a form field is submitted when it is disabled?
  12. Ignore mouse interaction on overlay image
  13. Cannot access cssRules from local css file in Chrome 64
  14. How to partition input field to appear as separate input fields on screen?
  15. CSS3-Animate elements if visible in viewport (Page Scroll)
  16. Open a new javascript window(.open) along with its CSS styling
  17. “Scroll” to the very right of a long text input
  18. How to create a responsive image that also scales up in Bootstrap 3
  19. option.style.display = “none” not working in safari [duplicate]
  20. CSS: Change parent on focus of child
  21. How to scroll table’s “tbody” independent of “thead”?
  22. Possible to disable @media queries or force a resolution? Reason: Allow an iphone to see the desktop site?
  23. Make image fill div completely without stretching
  24. How to prevent sticky hover effects for buttons on touch devices
  25. How do I make a move up and down when I’m scrolling the page?
  26. Fade background image in and out with jQuery?
  27. Hide div element when screen size is smaller than a specific size
  28. Convert dropdown to selection boxes with color and trigger drop down action
  29. Google’s Imageless Buttons
  30. How to apply background-color to a selected option?

Leave a Comment