¿Cuál es la mejor manera de detectar un dispositivo con "pantalla táctil" usando JavaScript?
Escribí un complemento jQuery que se puede usar tanto en dispositivos móviles como de escritorio. Me preguntaba si hay alguna manera con JavaScript de detectar si el dispositivo tiene capacidad de pantalla táctil. Estoy usando jquery-mobile.js para detectar los eventos de la pantalla táctil y funciona en iOS, Android, etc., pero también me gustaría escribir declaraciones condicionales basadas en si el dispositivo del usuario tiene una pantalla táctil.
¿Es eso posible?
ACTUALIZACIÓN 2021
Para ver las respuestas antiguas: consulte el historial. Decidí empezar desde cero porque se me estaba yendo de las manos mantener el historial en la publicación.
Mi respuesta original decía que podría ser una buena idea usar la misma función que usaba Modernizr, pero eso ya no es válido ya que eliminaron las pruebas de "eventos táctiles" en este PR: https://github.com/Modernizr/Modernizr /pull/2432 debido a que es un tema confuso.
Dicho esto, esta debería ser una forma bastante buena de detectar si el navegador tiene "capacidades táctiles":
function isTouchDevice() {
return (('ontouchstart' in window) ||
(navigator.maxTouchPoints > 0) ||
(navigator.msMaxTouchPoints > 0));
}
Pero para casos de uso más avanzados, muchas más personas más inteligentes que yo han escrito sobre este tema, recomendaría leer esos artículos:
- Stu Cox: No se puede detectar una pantalla táctil
- Detectar el tacto: es el 'por qué', no el 'cómo'
- Presentación delicada de Patrick H. Lauke
Actualización: lea la respuesta de blmstr a continuación antes de incorporar una biblioteca completa de detección de funciones a su proyecto. Detectar la compatibilidad táctil real es más complejo y Modernizr solo cubre un caso de uso básico.
Modernizr es una forma excelente y liviana de realizar todo tipo de detección de funciones en cualquier sitio.
Simplemente agrega clases al elemento html para cada característica.
Luego puedes apuntar a esas características fácilmente en CSS y JS. Por ejemplo:
html.touch div {
width: 480px;
}
html.no-touch div {
width: auto;
}
Y Javascript (ejemplo de jQuery):
$('html.touch #popup').hide();
Desde la introducción de las funciones de medios de interacción, simplemente puedes hacer:
if(window.matchMedia("(pointer: coarse)").matches) {
// touchscreen
}
https://www.w3.org/TR/mediaqueries-4/#descdef-media-any-pointer
Actualización (debido a comentarios): la solución anterior es detectar si un "puntero aproximado", generalmente una pantalla táctil, es el dispositivo de entrada principal. En caso de que desee detectar si un dispositivo con, por ejemplo, un mouse, también tiene una pantalla táctil, puede usarla any-pointer: coarseen su lugar.
Para obtener más información, consulte aquí: Detectar que el navegador no tiene mouse y es solo táctil
Como Modernizr no detecta IE10 en Windows Phone 8/WinRT, una solución simple para varios navegadores es:
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;
Solo necesita verificar una vez, ya que el dispositivo de repente no admitirá o dejará de admitir el tacto, así que guárdelo en una variable para que pueda usarlo varias veces de manera más eficiente.
