Actualmente tengo la condición @media (any-hover: hover)
en mi css, y anteriormente con (hover: hover)
, pero tampoco hago lo que quiero: me gustaría habilitar solo el evento hover si un dispositivo móvil tiene algún tipo de hover mecanismo (por ejemplo, trackpad, mouse, pero no limitado) implantado.
Sin embargo, con hover:hover
al menos en iPad no estimula el evento de desplazamiento en absoluto (sé que el hover
detecta si la interacción principal del dispositivo es compatible con el desplazamiento), ni siquiera tengo un teclado mágico conectado (que tiene un trackpad). Luego cambio a any-hover
y esta vez el iPad estimula el hover incluso sin ningún accesorio conectado, e interactúa con el tacto.
Por lo tanto, ¿hay alguna forma de detectar si un dispositivo tiene un dispositivo flotante conectado? ¿Debo usar pointer: fine
o pointer: coarse
para hacer esto? ¿O hay alguna manera de hacerlo en JS? No quiero que simplemente detecte si hay un mouse conectado, sino cualquier tipo de dispositivo con un mecanismo de flotación.
Entonces, ¿quieres algo que no coincida con los iPad normales y que coincida si alguien conecta un mouse a un iPad?
pointer: fine
suele ser suficiente, pero puede ser aún más preciso con (any-hover: hover) and (pointer: fine)
. Realmente solo desea habilitar el contenido flotante para dispositivos que tienen un control de puntero detallado.
También puedes expresar esto en JS:
let mql = window.matchMedia('(any-hover: hover) and (pointer: fine');
Luego cambio a any-hover y esta vez el iPad estimula el hover incluso sin ningún accesorio conectado, e interactúa con el tacto.
Eso parece un error.