He escrito un complemento de jQuery que se puede usar tanto en computadoras de escritorio como en dispositivos móviles. Me preguntaba si hay una forma con JavaScript para 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 en función de 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í comenzar desde cero, ya que se me estaba yendo de las manos al 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 correcta 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, personas mucho más inteligentes que yo han escrito sobre este tema, recomendaría leer esos artículos:
Actualización: lea la respuesta de blmstr a continuación antes de incluir una biblioteca completa de detección de características en su proyecto. La detección del soporte táctil real es más compleja 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 características en cualquier sitio.
Simplemente agrega clases al elemento html para cada característica.
Luego puede orientar esas funciones fácilmente en CSS y JS. Por ejemplo:
html.touch div { width: 480px; } html.no-touch div { width: auto; }Y Javascript (ejemplo jQuery):
$('html.touch #popup').hide();Como Modernizr no detecta IE10 en Windows Phone 8/WinRT, una solución simple para todos los navegadores es:
var supportsTouch = 'ontouchstart' in window || navigator.msMaxTouchPoints;Solo necesita verificar una vez, ya que el dispositivo de repente no admitirá o no admitirá el toque, así que simplemente guárdelo en una variable para que pueda usarlo varias veces de manera más eficiente.