¿Cómo puedo detectar la existencia de un mouse en un sitio web?

En un sitio web que estoy construyendo, tengo un conjunto de botones de navegación que debe ser grande para que se vea bien y se pueda hacer clic fácilmente, pero debe ser pequeño cuando el usuario no esté navegando. Entonces, en mi interfaz de usuario, reduzco los botones a una miniatura, y con el mouse sobre ella, la animo a tamaño completo. Esto funciona bien¿Cómo puedo detectar la existencia de un mouse en un sitio web?

Pero en las tabletas, no hay mouse ni mouse hover, por lo que necesito otro mecanismo para dejar que los usuarios naveguen. Estaba pensando en dejar que el usuario toque la miniatura, luego expandir la barra de botones de navegación completa, y luego el usuario puede tocar para navegar.

La pregunta es: ¿cómo puedo saber si el usuario está navegando sin mouse? Supongo que podría detectar el navegador, pero esto parece realmente escamoso.

Como alternativa, ¿alguien me puede indicar un mejor patrón de diseño de IU para esta situación?

Fuente

2012-08-02 Joshua Frank

No es realmente útil ahora, pero se habla de una consulta de medios que detectará esto, que es genial - http://www.webmonkey.com/2012/07/w3c-looking-to-improve-responsive- diseño-con-nuevas-Media-consultas/ – SpaceBeers

Varias respuestas plausibles aquí ... http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript –

@SpaceBeers: Eso es interesante. Se archivará cuando los navegadores comiencen a admitirlo. –

Esto probablemente debería ser lo que estás buscando:

http://developer.apple.com/library/safari/#documentation/InternetWeb/Conceptual/SafariVisualEffectsProgGuide/InteractiveControl/InteractiveControl.html

Fuente

2012-08-02 16:29:35

Esto es solo para Mobile Safari. No estoy seguro del soporte de Android/Windows Mobile. –

http://detectmobilebrowsers.com/ podrían ser de su interés

Fuente

2012-08-02 16:30:30

nice, me encanta lo que puedes encontrar simplemente por navegar sin rumbo las preguntas – Roest

Una opción es para detectar el agente navegador.

Pero también puede registrar escuchas para eventos touchstart/touchmove/touchend que se activan solo en dispositivos táctiles.

BTW hay un nuevo CSS media queries in level 4.

Quizás lo más interesante para usted sea el "puntero", para el cual se espera que el agente de usuario devuelva "ninguno | grueso | bien ". De acuerdo con la especificación," los ejemplos típicos de un sistema puntero "fino" son un mouse, un track-pad o una pantalla táctil basada en stylus. Las pantallas táctiles basadas en dedo calificarían como 'bastas'. "

Fuente

2012-08-02 16:32:58

crear un evento de clic personalizado, vincularlo con una función, y finalmente enviar el evento de clic creado al documento. Si la función gestionado con éxito para disparar, a continuación, el usuario dispone de un ratón de lo contrario podría ser cualquier dispositivo sin ratón

Fuente

2012-08-02 16:39:08 spaceman12

function isEvent(ev) 
{ 
    var d=document; 
    var isTrue=false; 
    var fn=function() 
    { 
     isTrue=true; 
    } 
    d.body.onclick=fn; 
    var e; 
    if(d.createEvent) 
    { 
     e=d.createEvent('Event'); 
     e.initEvent(ev,false,false); 
     d.body.dispatchEvent(e); 
    } 
    else if(d.createEventObject) 
    { 
     e=d.createEventObject(window.event); 
     d.body.fireEvent('on'+ev,e); 
    } 
    return isTrue; 
} 

//run the code 
var isMouse=isEvent('click'); 
if(isMouse) 
{ 
    alert('user has a mouse'); 
}

Asegúrese de ejecutar solamente cuando la carga del cuerpo empezó! DEMO

Fuente

2012-08-02 17:20:52 spaceman12

¿Cómo puedo detectar la existencia de un mouse en un sitio web?

Respuesta

Cuestiones relacionadas