examples - Detectando dispositivos de pantalla táctil con Javascript

vue detect if mobile

Question

En Javascript / jQuery, ¿cómo puedo detectar si el dispositivo del cliente tiene un mouse?

Tengo un sitio que desliza un pequeño panel de información cuando el usuario pasa el mouse sobre un elemento. Estoy usando jQuery.hoverIntent para detectar el vuelo estacionario, pero obviamente no funciona en dispositivos con pantalla táctil como iPhone / iPad / Android. Entonces en esos dispositivos me gustaría volver a presionar para mostrar el panel de información.

Answer 1

+1 para realizar el hover y click ambos. Otra forma podría ser el uso de consultas de medios de CSS y el uso de algunos estilos solo para pantallas / dispositivos móviles más pequeños, que son los que tienen más probabilidades de tener funcionalidad de tocar / tocar. Por lo tanto, si tiene algunos estilos específicos a través de CSS, y desde jQuery, verifique esos elementos para las propiedades de estilo del dispositivo móvil que podría enganchar en ellos para escribir su código específico para dispositivos móviles.

Vea aquí: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

Answer 2

En jQuery Mobile puedes simplemente hacer:

$.support.touch

No sé por qué esto está tan indocumentado ... pero es seguro para navegadores cruzados (las últimas 2 versiones de los navegadores actuales).

Answer 3

Escribí esto para uno de mis sitios y probablemente sea la solución más infalible. Sobre todo porque incluso Modernizr puede obtener falsos positivos en la detección táctil.

Si usas jQuery

$(window).one({
  mouseover : function(){
    Modernizr.touch = false; // Add this line if you have Modernizr
    $(''html'').removeClass(''touch'').addClass(''mouse'');
  } 
});

o simplemente JS puro ...

window.onmouseover = function(){ 
    window.onmouseover = null;
    document.getElementsByTagName("html")[0].className += " mouse";
}

Answer 4

Esto funciona para mí:

function isTouchDevice(){
    return true == ("ontouchstart" in window || window.DocumentTouch && document instanceof DocumentTouch);
}

Answer 5

Google Chrome parece devolver falsos positivos en este caso:

var isTouch = ''ontouchstart'' in document.documentElement;

Supongo que tiene algo que ver con su capacidad para "emular eventos táctiles" (F12 -> configuración en la esquina inferior derecha -> pestaña "anulaciones" -> última casilla de verificación). Sé que está desactivado por defecto, pero eso es a lo que conecto el cambio en los resultados con (el método "in" utilizado para trabajar en Chrome). Sin embargo, esto parece estar funcionando, por lo que he probado:

var isTouch = !!("undefined" != typeof document.documentElement.ontouchstart);

Todos los navegadores que he ejecutado ese código indican que el typeof es "objeto", pero me siento más seguro sabiendo que es indefinido :-)

Probado en IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome para iPad 21.0.1180.80 y iPad Safari. Sería genial si alguien hiciera más pruebas y compartiera los resultados.

Answer 6

He probado el siguiente código mencionado anteriormente en la discusión

 function is_touch_device() {
    return !!(''ontouchstart'' in window);
 }

funciona en Android Mozilla, Chrome, Opera, navegador predeterminado android y safari en iphone ... todo positivo ...

me parece sólido :)

Answer 7

Para el desarrollo de iPad, estoy usando:

  if (window.Touch)
  {
    alert("touchy touchy");
  }
  else
  {
    alert("no touchy touchy");
  }

A continuación, puedo vincular de forma selectiva los eventos basados ​​en el tacto (por ejemplo, ontouchstart) o eventos basados ​​en el mouse (por ejemplo, onmousedown). Todavía no he probado en Android.

Answer 8

Para mi primera publicación / comentario: todos sabemos que ''touchstart'' se activa antes de hacer clic. También sabemos que cuando el usuario abra su página, él o ella: 1) moverá el mouse 2) haga clic en 3) toque la pantalla (para desplazarse, o ... :))

Probemos algo:

// -> Inicio: jQuery

var hasTouchCapabilities = ''ontouchstart'' in window && (navigator.maxTouchPoints || navigator.msMaxTouchPoints);
var isTouchDevice = hasTouchCapabilities ? ''maybe'':''nope'';

//attach a once called event handler to window

$(window).one(''touchstart mousemove click'',function(e){

    if ( isTouchDevice === ''maybe'' && e.type === ''touchstart'' )
        isTouchDevice = ''yes'';
});

// <- End: jQuery

¡Que tengas un buen día!

Answer 9

Pruebas encontradas para window.Touch no funcionó en Android, pero esto hace:

function is_touch_device() {
  return !!(''ontouchstart'' in window);
}

Ver artículo: ¿Cuál es la mejor forma de detectar un dispositivo de ''pantalla táctil'' usando JavaScript?

Answer 10

Si usa modernizr.com , 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 utiliza Modernizr, puede simplemente 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 dará una gama más amplia de dispositivos móviles detectados de Microsoft que Windows Phone .

Ver también esta pregunta SO

Answer 11

Una útil publicación de blog sobre el tema, vinculada desde dentro de la fuente de Modernizr para detectar eventos táctiles. Conclusión: no es posible detectar dispositivos de pantalla táctil de manera confiable desde Javascript.

http://www.stucox.com/blog/you-cant-detect-a-touchscreen/

Answer 12

Yo suelo:

if(jQuery.support.touch){
    alert(''Touch enabled'');
}

en jQuery mobile 1.0.1

Answer 13

if ("ontouchstart" in window || navigator.msMaxTouchPoints)
        {
            isTouch = true;
        } else {
            isTouch = false;
        }

¡Funciona en todos lados!

Answer 14

return ((''ontouchstart'' in window)
      || (navigator.maxTouchPoints > 0)
      || (navigator.msMaxTouchPoints > 0));

Motivo del uso de maxTouchPoints junto con msMaxTouchPoints:

Microsoft ha declarado que, a partir de Internet Explorer 11, la versión prefijada de proveedor de Microsoft de esta propiedad (msMaxTouchPoints) puede eliminarse y recomienda utilizar maxTouchPoints en su lugar.

Fuente: http://ctrlq.org/code/19616-detect-touch-screen-javascript

Answer 15

var isTouchDevice = ''ontouchstart'' in document.documentElement;

Nota : El hecho de que un dispositivo admita eventos táctiles no significa necesariamente que sea exclusivamente un dispositivo de pantalla táctil. Muchos dispositivos (como mi Asus Zenbook) admiten eventos de clic y toque, incluso cuando no tienen ningún mecanismo de entrada táctil real. Cuando diseñe para soporte táctil, siempre incluya la compatibilidad de eventos click y nunca asuma que cualquier dispositivo es exclusivamente uno u otro.