So stellen Sie fest, ob der Client ein Touch-Gerät ist

Question

Gibt es eine schöne und saubere Methode oder einen Trick, um herauszufinden, ob der Benutzer ein Touch-Gerät benutzt oder nicht?

Ich weiß, es gibt Dinge wie var isiPad = navigator.userAgent.match(/iPad/i) != null;

aber ich frage mich einfach, ob es einen Trick gibt, um generell festzustellen, ob der Benutzer auf einem Touch-Gerät ist? Denn es gibt viel mehr Touch-Geräte und Tablets da draußen als nur iPads.

Ich danke Ihnen.

Answer 1

Sie können die folgende JS-Funktion verwenden:

function isTouchDevice() {
   var el = document.createElement('div');
   el.setAttribute('ongesturestart', 'return;'); // or try "ontouchstart"
   return typeof el.ongesturestart === "function";
}

Quelle: Erkennung des berührungsbasierten Surfens .

Bitte beachten Sie, dass der obige Code nur testet, ob der Browser Touch-Unterstützung hat, nicht das Gerät.

Verwandte Links:

• Wie man ein mobiles Gerät mit jQuery erkennt
• Wie optimiert man eine Website für Touch-Geräte?
• Wie man ein mobiles Gerät mit jQuery erkennt
• Wie kann man ein Touchscreen-Gerät am besten mit JavaScript erkennen?
• Mozilla.org Berührungserkennung: Es geht um das "Warum", nicht um das "Wie

Es kann eine Entdeckung geben in jquery für Mobiltelefone y jtouch

Answer 2

Einbeziehen. Modernisierer die eine kleine Bibliothek zur Erkennung von Merkmalen ist. Dann können Sie etwas wie unten verwenden.

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

Answer 3

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

Der einfachste Code, den ich gefunden habe, nachdem ich viel hier und dort gestöbert habe

Answer 4

Verwendung von document.createEvent("TouchEvent") wird auf Desktop-Geräten nicht funktionieren. Sie können es also innerhalb einer if-Anweisung verwenden.

Beachten Sie, dass diese Methode auf Geräten, die keine Touch-Funktion haben, zu Fehlern führen kann. Ich würde die Überprüfung auf ontouchstart in document.documentElement .

Answer 5

Sehen Sie sich das an Beitrag gibt es ein wirklich schönes Code-Snippet für das, was zu tun ist, wenn Touch-Geräte erkannt werden oder was zu tun ist, wenn das Touchstart-Ereignis aufgerufen wird:

$(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();
}