JavaScript erkennt mobilen Browser

1. Erkennen des mobilen Browsers durch Erkennen des verwendeten Geräts
2. Mobile Browser per Touchscreen erkennen by

JavaScript wird häufig für die Entwicklung webbasierter Anwendungen verwendet. Die meisten dieser Anwendungen sind auch mit mobilen Browsern kompatibel.

In diesem Tutorial werden die verschiedenen verfügbaren Methoden zum Erkennen eines mobilen Browsers mit JavaScript demonstriert.

Erkennen des mobilen Browsers durch Erkennen des verwendeten Geräts

Der einfachste und unkomplizierteste Ansatz, einen mobilen Browser mit JavaScript zu identifizieren, besteht darin, eine Liste verschiedener heute auf dem Markt erhältlicher Geräte durchzugehen und zu prüfen, ob der useragent eines der Geräte in der uns verfügbaren Liste ergänzt.

Das Folgende ist der Codeausschnitt der Funktion, mit der wir arbeiten werden:

function detectMob() {
  const toMatch = [
    /Android/i, /webOS/i, /iPhone/i, /iPad/i, /iPod/i, /BlackBerry/i,
    /Windows Phone/i
  ];

  return toMatch.some((toMatchItem) => {
    return navigator.userAgent.match(toMatchItem);
  });
}

Wir können unsere Suche nach Mobilgeräten weiter eingrenzen, indem wir annehmen, dass das Zielgerät mobil ist, wenn die Auflösung kleiner oder gleich 800 x 600 ist, obwohl die meisten heute verfügbaren Handys eine viel höhere Auflösung bieten.

Daher wird empfohlen, beide Methoden zu verwenden, das verwendete Gerät zu erkennen und die Auflösung des Geräts für die höchste Effizienz zu erkennen, um falsch positive Ergebnisse zu vermeiden.

Der folgende Code ist der Code zum Erkennen der Auflösung des Geräts, das der Benutzer verwendet.

function detectMob() {
  return ((window.innerWidth <= 800) && (window.innerHeight <= 600));
}

Mobile Browser per Touchscreen erkennen by

Ein anderer Ansatz zum Prüfen, ob das vom Benutzer bediente Zielgerät ein Mobilgerät ist oder nicht, besteht darin, zu prüfen, ob der Benutzer ein berührungsbedientes Gerät verwendet. Da alle heute auf dem Markt erhältlichen Mobiltelefone per Touch bedient werden, ist diese Methode zuverlässig und effizient.

Es gibt jedoch eine Einschränkung, dass diese Methode auch Tablets umfasst, da sie ebenfalls berührungsgesteuert sind.

Wir können den folgenden Code verwenden, um einen mobilen Browser zu erkennen, indem wir sehen, ob das Gerät mit einem Touchscreen funktioniert.

var touchDevice = ('ontouchstart' in document.documentElement);

Diese Funktion kann nicht nur auf Mobiltelefone und Tablets, sondern auch auf Desktops und Laptops, die Touchscreens unterstützen, erweitert werden.

var touchDevice = ('ontouchstart' in document.documentElement);