javascript - style - title label html

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

Question

Esta pregunta ya tiene una respuesta aquí:

• ¿Cuál es la mejor manera de detectar un dispositivo de ''pantalla táctil'' utilizando JavaScript? 35 respuestas

¿Existe 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 como var isiPad = navigator.userAgent.match(/iPad/i) != null;

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

gracias.

Answer 1

Echa un vistazo a esta post , que ofrece un fragmento de código realmente agradable para saber qué hacer cuando se detectan dispositivos táctiles o qué hacer si se llama al evento touchstart:

$(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 2

El uso de document.createEvent("TouchEvent") no funcionará en dispositivos de escritorio. Así que puedes usarlo dentro de una sentencia if.

Tenga en cuenta que este método podría producir errores en dispositivos no táctiles. Preferiría verificar si hay un ontouchstart en el document.documentElement .

Answer 3

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

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

Answer 4

Puede utilizar 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: Detección de la navegación basada en el tacto .

Tenga en cuenta que el código anterior solo prueba si el navegador es compatible con el tacto, no el dispositivo.

Enlaces relacionados:

• Optimizar el sitio web para dispositivos táctiles.
• ¿Cuál es la mejor manera de detectar un dispositivo móvil en jQuery?
• ¿Cuál es la mejor manera de detectar un dispositivo de ''pantalla táctil'' utilizando JavaScript?
• Mozilla.org Detección táctil: es el ''por qué'', no el ''cómo''

Puede haber detección en jquery para móviles y jtouch

Answer 5

Si usa Modernizr , es muy fácil 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 usa Modernizr, simplemente puede reemplazar la función Modernizr.touch anterior con (''ontouchstart'' in document.documentElement)

También tenga en cuenta que probar el agente de usuario iemobile le iemobile una gama más amplia de dispositivos móviles de Microsoft detectados que Windows Phone .

También vea esta pregunta SO

Answer 6

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

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