How to detect if pointer coarse or fine

Question

I read this about interaction media which is explain how css can detect if pointer is touchscreen or not. It's using @media query like

@media (pointer: coarse){
  body{
    // do something
  }
}

but I just wonder how to implementing it using javascript ot JQuery, is it possible?

Thank you, and sorry for my English

score 18 · Accepted Answer · answered Nov 24 '17 at 11:43

18

is_fine = matchMedia('(pointer:fine)').matches
is_coarse = matchMedia('(pointer:coarse)').matches

Works in Chrome for me.

answered Nov 24 '17 at 11:43

Inversion

Alternatively you can style some element with CSS and check whether that style is applied via JS. – Lukáš Řádek Apr 06 '22 at 16:35
1

`window.matchMedia()` should be well supported: https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia – basically if the CSS method works, the `matchMedia()` should also work. – Mikko Rantalainen Sep 08 '22 at 10:47
Would be nice if there was a more native JavaScript API for determining input devices, without having to go via ` matchMedia`, but I could not find one. – Jake Feb 02 '23 at 06:24

1 Answers1