it-swarm.com.de

Erkennen von Touchscreen-Geräten mit Javascript

Wie kann ich in Javascript/jQuery erkennen, ob das Clientgerät eine Maus hat?

Ich habe eine Seite, auf der ein kleines Infofenster eingeblendet wird, wenn der Benutzer mit der Maus über einen Gegenstand fährt. Ich verwende jQuery.hoverIntent, um den Schwebeflug zu erkennen, aber dies funktioniert offensichtlich nicht auf Touchscreen-Geräten wie iPhone/iPad/Android. Auf diesen Geräten würde ich gerne wieder auf tippen, um das Infofenster anzuzeigen.

126
Brad Robinson

+1 für die Ausführung von hover und click. Eine andere Möglichkeit besteht darin, CSS-Medienabfragen zu verwenden und einige Stile nur für kleinere Bildschirme/Mobilgeräte zu verwenden, bei denen die Wahrscheinlichkeit am größten ist, dass sie über eine Touch-/Tap-Funktion verfügen. Wenn Sie also einige bestimmte Stile über CSS haben und von jQuery aus diese Elemente auf die Stileigenschaften für Mobilgeräte prüfen, können Sie sie einbinden, um Ihren Code für Mobilgeräte zu schreiben.

Siehe hier: http://www.forabeautifulweb.com/blog/about/hardboiled_css3_media_queries/

12
Moin Zaman
var isTouchDevice = 'ontouchstart' in document.documentElement;

Hinweis: Nur weil ein Gerät Berührungsereignisse unterstützt, bedeutet dies nicht unbedingt, dass es sich ausschließlich um ein Touchscreen-Gerät handelt. Viele Geräte (wie mein Asus Zenbook) unterstützen sowohl Click- als auch Touch-Ereignisse, auch wenn sie keine tatsächlichen Touch-Eingabemechanismen haben. Beziehen Sie beim Entwerfen für die Touch-Unterstützung immer die Unterstützung für Klickereignisse ein und nehmen Sie niemals an, dass es sich bei einem Gerät ausschließlich um das eine oder andere handelt.

265
KevBurnsJr

Gefundene Tests für window.Touch funktionierten nicht auf Android aber dies funktioniert:

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

Siehe Artikel: Wie erkennt man ein 'Touchscreen'-Gerät am besten mit JavaScript?

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

Grund für die Verwendung von maxTouchPoints zusammen mit msMaxTouchPoints:

Microsoft hat angegeben, dass ab Internet Explorer 11 die vom Microsoft-Anbieter festgelegte Version dieser Eigenschaft (msMaxTouchPoints) möglicherweise entfernt wird, und empfiehlt stattdessen die Verwendung von maxTouchPoints.

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

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

Funktioniert überall !!

7
Code Spy

Google Chrome scheint in diesem Fall falsch positive Ergebnisse zu liefern:

var isTouch = 'ontouchstart' in document.documentElement;

Ich nehme an, es hat etwas mit seiner Fähigkeit zu tun, "Berührungsereignisse zu emulieren" (F12 -> Einstellungen in der unteren rechten Ecke -> Registerkarte "Überschreibungen" -> letztes Kontrollkästchen). Ich weiß, dass es standardmäßig deaktiviert ist, aber das ist es, womit ich die Ergebnisänderung verbinde (die "in" -Methode, die für die Arbeit in Chrome verwendet wurde). Dies scheint jedoch zu funktionieren, soweit ich getestet habe:

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

Alle Browser, in denen ich diesen Code ausgeführt habe, geben an, dass typeof "object" ist, aber ich bin mir sicherer, dass es alles andere als undefiniert ist :-)

Getestet auf IE7, IE8, IE9, IE10, Chrome 23.0.1271.64, Chrome für iPad 21.0.1180.80 und iPad Safari. Es wäre cool, wenn jemand gemacht Einige weitere Tests und teilten die Ergebnisse.

4
Ash

Ich benutze:

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

in jQuery Mobile 1.0.1

4
Mark

Für meinen ersten Beitrag/Kommentar: Wir alle wissen, dass 'Touchstart' vor dem Klicken ausgelöst wird. Wir wissen auch, dass der Benutzer beim Öffnen Ihrer Seite: 1) die Maus bewegt 2) auf 3) den Bildschirm berührt (zum Scrollen oder ... :))

Versuchen wir etwas:

// -> Start: 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

Einen schönen Tag noch!

4
silassare

Schrieb dies für eine meiner Websites und ist wahrscheinlich die narrensicherste Lösung. Zumal auch Modernizr bei der Berührungserkennung Fehlalarme bekommen kann.

Wenn Sie jQuery verwenden

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

oder einfach nur JS ...

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

Ein hilfreicher Blog-Beitrag zu diesem Thema, der zur Erkennung von Berührungsereignissen aus der Modernizr-Quelle verlinkt ist. Fazit: Touchscreen-Geräte lassen sich mit Javascript nicht zuverlässig erkennen.

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

3
Mike S

Ich habe folgenden Code getestet, der oben in der Diskussion erwähnt wurde

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

funktioniert mit Android Mozilla, Chrome, Opera, Android Standardbrowser und Safari auf dem iPhone ... alles positiv ...

scheint solide für mich :)

3
Prasad

Das funktioniert bei mir:

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

Wenn Sie Modernizr verwenden, ist es sehr einfach, Modernizr.touch Wie bereits erwähnt zu verwenden.

Aus Sicherheitsgründen bevorzuge ich jedoch die Verwendung einer Kombination aus Modernizr.touch Und Benutzeragententests.

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
    }

Wenn Sie Modernizr nicht verwenden, können Sie einfach die Funktion Modernizr.touch Oben durch ('ontouchstart' in document.documentElement) Ersetzen.

Beachten Sie auch, dass Sie durch Testen des Benutzeragenten iemobile eine größere Auswahl an erkannten Microsoft-Mobilgeräten erhalten als mit Windows Phone.

Siehe auch diese SO Frage

1
Peter-Pan

In jQuery Mobile können Sie einfach Folgendes tun:

$.support.touch

Ich weiß nicht, warum dies so undokumentiert ist, aber es ist browserübergreifend sicher (die neuesten 2 Versionen der aktuellen Browser).

1
OZZIE