Cómo determinar si el cliente es un dispositivo táctil

Question

¿hay algún método o truco agradable y limpio para averiguar si el usuario está en un dispositivo táctil o no?

Sé que hay cosas por el estilo var isiPad = navigator.userAgent.match(/iPad/i) != null;

pero yo simplemente pregunto si hay un truco para determinar en general, si el usuario está en el dispositivo táctil? Porque hay muchos más dispositivos táctiles y tabletas, solo iPads.

gracias.

Answer 1

Usted puede usar la siguiente función JS:

function isTouchDevice() { 
    var el = document.createElement('div'); 
    el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart" 
    return typeof el.ongesturestart === "function"; 
} 

Fuente: Detecting touch-based browsing.

Tenga en cuenta que el código anterior solo prueba si el navegador tiene soporte para touch, no para el dispositivo.

Enlaces relacionados:

• Optimize website for touch devices
• What is the best way to detect a mobile device in jQuery?
• What's the best way to detect a 'touch screen' device using JavaScript?
• Mozilla.org Detecting touch: it’s the ‘why’, not the ‘how’

Puede haber en la detección y jquery for mobilejtouch

Answer 2

Incluye modernizer, que es una pequeña biblioteca de detección de características. Entonces puedes usar algo como a continuación.

if (Modernizr.touch){ 
    // bind to touchstart, touchmove, etc and watch `event.streamId` 
} else { 
    // bind to normal click, mousemove, etc 
} 

Answer 3

Control hacia fuera este post, da una muy agradable fragmento de código para saber qué hacer cuando se detectan los dispositivos táctiles o qué hacer si touchstart evento se llama:

$(function(){ 
    if(window.Touch) { 
    touch_detect.auto_detected(); 
    } else { 
    document.ontouchstart = touch_detect.surface; 
    } 
}); // End loaded jQuery 
var touch_detect = { 
    auto_detected: function(event){ 
    /* add everything you want to do onLoad here (eg. activating hover controls) */ 
    alert('this was auto detected'); 
    activateTouchArea(); 
    }, 
    surface: function(event){ 
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */ 
    alert('this was detected by touching'); 
    activateTouchArea(); 
    } 
}; // touch_detect 
function activateTouchArea(){ 
    /* make sure our screen doesn't scroll when we move the "touchable area" */ 
    var element = document.getElementById('element_id'); 
    element.addEventListener("touchstart", touchStart, false); 
} 
function touchStart(event) { 
    /* modularize preventing the default behavior so we can use it again */ 
    event.preventDefault(); 
} 

Answer 4

Usando document.createEvent("TouchEvent") no funcionará en dispositivos de escritorio. Entonces puedes usarlo dentro de una declaración if.

Tenga en cuenta que este método podría producir errores en dispositivos no táctiles. Preferiría buscar ontouchstart en document.documentElement.

Answer 5

if ("ontouchstart" in document.documentElement) 
{ 
    alert("It's a touch screen device."); 
} 
else 
{ 
alert("Others devices"); 
} 

código más simple que se encontró después de navegar mucho aquí y allá

Answer 6

Si utiliza Modernizr, es muy fácil de usar Modernizr.touch como se mencionó anteriormente.

Sin embargo, prefiero usar una combinación de Modernizr.touch y pruebas de agente de usuario, solo para estar seguro.

var deviceAgent = navigator.userAgent.toLowerCase(); 

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) || 
deviceAgent.match(/(android)/) || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i)); 

if (isTouchDevice) { 
     //Do something touchy 
    } else { 
     //Can't touch this 
    } 

Si no se utiliza Modernizr, sólo tiene que reemplazar la función Modernizr.touch anterior con ('ontouchstart' in document.documentElement)

También tenga en cuenta que las pruebas de la aplicación del usuario iemobile le dará más amplia gama de dispositivos móviles de Microsoft detectado que Windows Phone.

Also see this SO question