2012-08-02 3 views
5

Auf einer Website, die ich baue, habe ich eine Reihe von Navigationstasten, die groß sein müssen, um gut auszusehen und leicht anzuklicken, aber klein sein müssen, wenn der Benutzer nicht navigiert. In meiner Benutzeroberfläche verkleinere ich die Schaltflächen zu einem Miniaturbild und animiere es mit der Maus auf die volle Größe. Das funktioniert gut.Wie kann ich die Existenz einer Maus auf einer Website erkennen?

Aber auf Tablets gibt es keine Maus und keine Maus, und deshalb brauche ich einen anderen Mechanismus, um die Benutzer navigieren zu lassen. Ich dachte daran, den Benutzer auf das Thumbnail tippen zu lassen, dann die gesamte Navigationsleiste auszuklappen, und dann kann der Benutzer tippen, um zu navigieren.

Die Frage ist: Wie kann ich feststellen, ob der Benutzer mit keiner Maus surft? Ich glaube, ich konnte den Browser erkennen, aber das scheint wirklich flockig zu sein.

Alternativ kann mir jemand auf ein besseres UI-Design-Muster für diese Situation hinweisen?

+1

Nicht wirklich nützlich jetzt, aber es ist die Rede von einer Medienabfrage, die dies erkennen wird, die ziemlich cool ist - http://www.webmonkey.com/2012/07/w3c-looking-to-improve-responsive- Design-mit-new-media-Abfragen/ – SpaceBeers

+1

Mehr plausible Antworten hier ... http://stackoverflow.com/questions/3974827/detecting-touch-screen-devices-with-javascript –

+0

@SpaceBeers: Das ist interessant. Wird es ablegen für wenn Browser starten es zu unterstützen. –

Antwort

2

Eine Möglichkeit ist, den Browser-Agent zu erkennen.

Sie können jedoch auch Listener für touchstart/touchmove/touchend Ereignisse registrieren, die nur auf Touch-Geräten ausgelöst werden.

BTW gibt es eine neue CSS media queries in level 4.

Vielleicht der interessanteste für Sie wäre der "Zeiger", für den der Benutzer-Agent erwartet wird, zurückzugeben "keine | grob | gut. "Laut der Spezifikation sind" typische Beispiele für ein feines Zeige-System eine Maus, ein Track-Pad oder ein stiftbasierter Touchscreen. Fingerbasierte Touchscreens würden als 'grob' eingestuft werden. "

0

Erstellen Sie ein benutzerdefiniertes Klickereignis, binden Sie es mit einer Funktion, und senden Sie schließlich das erstellte Klickereignis an das Dokument. Wenn die Funktion erfolgreich auszulösen verwaltet wird, dann hat der Benutzer eine Maus sonst könnte es

0
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'); 
} 

Stellen Sie sicher, jedes mouseless Gerät sein, erst dann laufen, wenn die Belastung des Körpers begonnen! DEMO

Verwandte Themen