Una cosa complicada a tener en cuenta son los portátiles con pantallas táctiles. En ese caso, la interacción principal tiende a ser a través de un ratón… aunque el dispositivo técnicamente tenga una pantalla táctil. Eso nos ha causado algunos dolores de cabeza recientemente con las reacciones ![]()
Pero para responder a tu pregunta específica: creo que las consultas de medios CSS son el camino a seguir. Tenemos hover, pointer, any-hover y any-pointer.
Y luego puedes ejecutar esas consultas de medios CSS desde JS usando window.matchMedia de esta manera: