En lugar de tratar de filtrar los dispositivos con pantalla táctil (es decir, iPhone o iPad), un enfoque más robusto es tratar de detectar el tacto a medida que es compatible, o mejor aún, a medida que ocurre, y modificar su comportamiento de desplazamiento en consecuencia. Aquí hay un par de formas de hacerlo.
Primero, puede agregar una clase CSS a la raíz del documento (es decir, is-touch ) la primera vez que se toca en la pantalla, luego haga referencia a esa clase en su CSS para apuntar a dispositivos de pantalla táctil:
document.addEventListener (‘touchstart’, función addtouchclass (e) {// primer usuario toca la pantalla
document.documentElement.classList.add (‘is-touch’) // agrega la clase “can-touch” a la raíz del documento usando la API classList
document.removeEventListener (‘touchstart’, addtouchclass, false) // cancelar el registro del evento touchstart
}, falso)
- Si el tema secundario no es compatible con dispositivos móviles, ¿cargará el tema principal compatible con dispositivos móviles para dispositivos móviles?
- ¿Cuál es la mejor manera de hacer que su sitio web sea amigable con el navegador móvil?
- ¿Cuál es la tecnología para diferenciar el diseño de la versión de escritorio del sitio web con el diseño de la versión móvil como Flipkart.com o Amazon.com?
- ¿Cuál es la mejor manera de crear una aplicación móvil sin programación, de forma gratuita?
- ¿Por qué los enlaces profundos móviles son diferentes de los enlaces profundos web? ¿En qué se diferencian? ¿Hay cosas que debo tener en cuenta cuando permito que mi aplicación sea de enlace profundo?
Otra opción en el futuro es utilizar CSS Media Consultas Nivel 4 Interacción Características de medios para declarar estilos que se dirigen a dispositivos compatibles :hover completamente, parcialmente (dispositivos de pantalla táctil) o ninguno (sin período de dispositivo señalador):
@media (desplazamiento: ninguno) {
/ * Sin soporte de desplazamiento * /
}
@media (desplazarse: bajo demanda) {
/ * Dispositivos de pantalla táctil * /
}
@media (hover: hover) {
/ * Dispositivos de mouse * /
}
El problema con el uso de CSS Media Queries además del pobre soporte del navegador en este momento es que no tiene en cuenta los dispositivos que admiten tanto el tacto como el mouse; en ese caso, elige el mínimo común denominador, o verdadero para el hover:on-demand pero falso para hover:hover . Tampoco es dinámico, por lo que la detección no cambia cuando el usuario cambia de la pantalla táctil al mouse, por ejemplo.
Recomiendo los siguientes dos artículos para obtener una comprensión profunda de los desafíos y las soluciones actuales cuando se trata de :hover por las plataformas:
4 formas novedosas de lidiar con los efectos pegajosos: desplazarse sobre dispositivos móviles
Características de los medios de interacción y su potencial
