Hice un efecto de desplazamiento que funcionaría bien en las interfaces de mouse/teclado, pero no tan idealmente con las interfaces táctiles. Me gustaría apuntar a los dispositivos de interfaz táctil con algún tipo de consulta de medios o algo que aleje los dispositivos de entrada táctil de los dispositivos de escritorio.
Habría usado las consultas de medios de tamaño de pantalla, pero hay tabletas cuyos tamaños se superponen con los de las computadoras portátiles. ¿Hay alguna manera de apuntar a dispositivos de interfaz táctil con JavaScript o CSS puro o de alguna otra manera?
Puedes hacerlo usando la consulta de media de pointer :
div { padding: 8px; width: 200px; border: 1px solid; } @media (pointer:fine) { div:hover { cursor: pointer; background-color: red; } } @media (pointer:coarse) { div:active { background-color: green; } } <div>Hover me on PC</div> La propiedad de hover se define solo para aquellos dispositivos que tienen mouse (cursor fino);
O puede aplicar diferentes propiedades para pantallas táctiles usando
@media (pointer:coarse)
Puede detectar si un dispositivo es táctil observando algunas capacidades.
Por ejemplo, la consulta de medios al pasar el mouse le dice si el dispositivo entiende el desplazamiento "adecuado".
Aquí hay un fragmento simple para demostrar:
.hov:hover { color: black; } @media (hover: hover) { .hov:hover { color: red; } } <div class="hov">Hover over me</div>Sin embargo, es posible que desee pensar exactamente qué capacidades desea probar, recordando que algunos dispositivos pueden tener acciones táctiles y de mouse.