Was ist der beste Weg, um ein mobiles Gerät zu erkennen?

Gibt es eine solide Möglichkeit zu erkennen, ob ein Benutzer ein mobiles Gerät in jQuery verwendet oder nicht? Ähnliches wie das CSS @ media-Attribut? Ich möchte ein anderes Skript ausführen, wenn sich der Browser auf einem Handheld-Gerät befindet.

Die jQuery- $.browserFunktion ist nicht das, wonach ich suche.

Anmerkung des Herausgebers: Die Erkennung von Benutzeragenten wird für moderne Webanwendungen nicht empfohlen. In den Kommentaren unter dieser Antwort finden Sie eine Bestätigung dieser Tatsache. Es wird empfohlen, eine der anderen Antworten mithilfe der Funktionserkennung und / oder Medienabfragen zu verwenden.

Anstatt jQuery zu verwenden, können Sie es mit einfachem JavaScript erkennen:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Oder Sie können beide kombinieren, um den Zugriff über jQuery zu erleichtern ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Jetzt $.browserwird "device"für alle oben genannten Geräte zurückkehren

Hinweis: $.browserauf entfernt jQuery v1.9.1 . Sie können dies jedoch verwenden, indem Sie den Code des jQuery-Migrations-Plugins verwenden

Eine gründlichere Version:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

Für mich ist klein schön, also benutze ich diese Technik:

In der CSS-Datei:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

In der jQuery / JavaScript-Datei:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Mein Ziel war es, meine Website "mobilfreundlich" zu gestalten. Daher verwende ich CSS-Medienabfragen, um Elemente abhängig von der Bildschirmgröße anzuzeigen / auszublenden.

In meiner mobilen Version möchte ich beispielsweise die Facebook Like Box nicht aktivieren, da sie all diese Profilbilder und Inhalte lädt. Und das ist nicht gut für mobile Besucher. Neben dem Ausblenden des Containerelements mache ich dies auch im jQuery-Codeblock (oben):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Sie können es in Aktion unter http://lisboaautentica.com sehen

Ich arbeite immer noch an der mobilen Version, daher sieht sie zum Zeitpunkt des Schreibens immer noch nicht so aus, wie sie sollte.

Update von dekin88

Es ist eine JavaScript-API zum Erkennen von Medien integriert. Anstatt die obige Lösung zu verwenden, verwenden Sie einfach Folgendes:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

    if (isMobile) {
        //Conditional script here
    }
 });

Browser-Unterstützung: http://caniuse.com/#feat=matchmedia

Der Vorteil dieser Methode besteht darin, dass sie nicht nur einfacher und kürzer ist, sondern dass Sie bei Bedarf auch verschiedene Geräte wie Smartphones und Tablets bedingt separat anvisieren können, ohne dem DOM Dummy-Elemente hinzufügen zu müssen.

Laut Mozilla - Browsererkennung mit dem User Agent :

Zusammenfassend empfehlen wir, irgendwo im User Agent nach der Zeichenfolge "Mobi" zu suchen, um ein mobiles Gerät zu erkennen.

So was:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Dies entspricht allen gängigen Benutzeragenten für mobile Browser, einschließlich Mozilla, Safari, IE, Opera, Chrome usw.

Update für Android

EricL empfiehlt, auch Androidals Benutzeragent zu testen , da die Zeichenfolge des Chrome-Benutzeragenten für Tablets nicht "Mobi" enthält (die Telefonversionen jedoch):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Ein einfacher und effektiver Einzeiler:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Der obige Code berücksichtigt jedoch nicht den Fall für Laptops mit Touchscreen. Daher stelle ich diese zweite Version zur Verfügung, die auf der @ Julian-Lösung basiert :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

Was Sie tun, indem Sie ein mobiles Gerät erkennen möchten, kommt einem IMO-Konzept "Browser-Sniffing" etwas zu nahe. Es wäre wahrscheinlich viel besser, eine Feature-Erkennung durchzuführen. Bibliotheken wie http://www.modernizr.com/ können dabei helfen.

Wo liegt beispielsweise die Grenze zwischen mobil und nicht mobil? Es wird von Tag zu Tag verschwommener.

Es ist nicht jQuery, aber ich habe folgendes gefunden: http://detectmobilebrowser.com/

Es bietet Skripte zum Erkennen mobiler Browser in mehreren Sprachen, von denen eine JavaScript ist. Das kann Ihnen bei dem helfen, was Sie suchen.

Da Sie jedoch jQuery verwenden, möchten Sie möglicherweise die jQuery.support-Auflistung kennen. Es ist eine Sammlung von Eigenschaften zum Erkennen der Funktionen des aktuellen Browsers. Die Dokumentation finden Sie hier: http://api.jquery.com/jQuery.support/

Da ich nicht genau weiß, was Sie erreichen möchten, weiß ich nicht, welche davon am nützlichsten ist.

Alles in allem denke ich, dass Sie am besten ein anderes Skript in einer serverseitigen Sprache umleiten oder in die Ausgabe schreiben sollten (falls dies eine Option ist). Da Sie die Funktionen eines mobilen Browsers x nicht wirklich kennen, ist die Erkennungs- und Änderungslogik auf der Serverseite die zuverlässigste Methode. Natürlich ist das alles ein strittiger Punkt, wenn Sie keine serverseitige Sprache verwenden können :)

Manchmal ist es wünschenswert zu wissen, welches Markengerät ein Kunde verwendet, um für dieses Gerät spezifische Inhalte anzuzeigen, z. B. einen Link zum iPhone Store oder zum Android Market. Modernizer ist großartig, zeigt Ihnen jedoch nur Browserfunktionen wie HTML5 oder Flash.

Hier ist meine UserAgent-Lösung in jQuery, um für jeden Gerätetyp eine andere Klasse anzuzeigen:

/*** sniff the UA of the client and show hidden div's for that device ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Diese Lösung stammt von Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Eine Lösung gefunden in: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Und um zu überprüfen, ob es sich um ein Mobiltelefon handelt, können Sie Folgendes testen:

if(isMobile.any()) {
   //some code...
}

Wenn mit "mobil" "kleiner Bildschirm" gemeint ist, verwende ich Folgendes:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

Auf dem iPhone erhalten Sie eine window.screen.width von 320. Auf Android erhalten Sie eine window.outerWidth von 480 (dies kann jedoch von Android abhängen). iPads und Android-Tablets geben Zahlen wie 768 zurück, sodass sie die vollständige Ansicht erhalten, die Sie möchten.

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

Ich bevorzuge jedoch die Verwendung einer Kombination aus Modernizr.touchund Testen von Benutzeragenten, um sicher zu gehen.

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 die Modernizr.touchobige Funktion einfach durch ersetzen('ontouchstart' in document.documentElement)

Beachten Sie außerdem, dass Sie durch das Testen des Benutzeragenten iemobileeine größere Auswahl an erkannten Microsoft-Mobilgeräten erhalten als Windows Phone.

Siehe auch diese SO-Frage

Sie können sich nicht darauf verlassen navigator.userAgent, dass nicht jedes Gerät sein echtes Betriebssystem preisgibt. Auf meinem HTC hängt es zum Beispiel von den Einstellungen ab ("mobile Version verwenden" ein / aus). Auf http://my.clockodo.com haben wir einfach screen.widthkleine Geräte erkannt. Leider gibt es in einigen Android-Versionen einen Fehler mit screen.width. Sie können diese Methode mit dem userAgent kombinieren:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

Ich weiß, dass diese Frage viele Antworten hat, aber nach dem, was ich gesehen habe, nähert sich niemand der Antwort so, wie ich das lösen würde.

CSS verwendet die Breite (Medienabfragen), um zu bestimmen, welche Stile basierend auf der Breite auf das Webdokument angewendet werden. Warum nicht die Breite im JavaScript verwenden?

Zum Beispiel gibt es in den Medienabfragen von Bootstrap (Mobile First) 4 Fang- / Haltepunkte:

• Extra kleine Geräte sind 768 Pixel und kleiner.
• Kleine Geräte reichen von 768 bis 991 Pixel.
• Mittlere Geräte reichen von 992 bis 1199 Pixel.
• Große Geräte haben eine Größe von 1200 Pixel und mehr.

Damit können wir auch unser JavaScript-Problem lösen.

Zuerst erstellen wir eine Funktion, die die Fenstergröße abruft und einen Wert zurückgibt, mit dem wir sehen können, welche Größe das Gerät in unserer Anwendung anzeigt:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Nachdem wir die Funktion eingerichtet haben, können wir sie aufrufen und den Wert speichern:

var device = getBrowserWidth();

Ihre Frage war

Ich möchte ein anderes Skript ausführen, wenn sich der Browser auf einem Handheld-Gerät befindet.

Nachdem wir nun die Geräteinformationen haben, bleibt nur noch eine if-Anweisung:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Hier ist ein Beispiel für CodePen: http://codepen.io/jacob-king/pen/jWEeWG

In einer Zeile Javascript:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Wenn der Benutzeragent 'Mobi' enthält (gemäß MDN) und ontouchstart verfügbar ist, handelt es sich wahrscheinlich um ein mobiles Gerät.

Ich bin überrascht, dass niemand auf eine nette Website hingewiesen hat: http://detectmobilebrowsers.com/ Sie hat vorgefertigten Code in verschiedenen Sprachen für die mobile Erkennung (einschließlich, aber nicht beschränkt auf):

• Apache
• ASP
• C #
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Python
• Schienen

Wenn Sie die Tablets ebenfalls erkennen müssen, lesen Sie einfach den Abschnitt Info, um weitere RegEx-Parameter zu erhalten.

Android-Tablets, iPads, Kindle Fires und PlayBooks werden vom Design her nicht erkannt. |android|ipad|playbook|silkFügen Sie dem ersten regulären Ausdruck hinzu , um Unterstützung für Tablets hinzuzufügen .

Wenn Sie sich keine besonderen Sorgen um kleine Displays machen, können Sie die Breiten- / Höhenerkennung verwenden. Auf diese Weise wird die mobile Site aufgerufen, wenn die Breite unter einer bestimmten Größe liegt. Es ist möglicherweise nicht der perfekte Weg, aber für mehrere Geräte ist es wahrscheinlich am einfachsten zu erkennen. Möglicherweise müssen Sie eine bestimmte für das iPhone 4 (große Auflösung) eingeben.

Um eine zusätzliche Kontrollebene hinzuzufügen, verwende ich den HTML5-Speicher, um festzustellen, ob mobiler Speicher oder Desktop-Speicher verwendet wird. Wenn der Browser keinen Speicher unterstützt, habe ich ein Array von mobilen Browsernamen und vergleiche den Benutzeragenten mit den Browsern im Array.

Es ist ziemlich einfach. Hier ist die Funktion:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

Wenn festgestellt wird, dass nur eine Überprüfung navigator.userAgentnicht immer zuverlässig ist. Eine höhere Zuverlässigkeit kann auch durch Überprüfung erreicht werden navigator.platform. Eine einfache Änderung einer vorherigen Antwort scheint besser zu funktionieren:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
   (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
    // some code...
}

Ich rate Ihnen, http://wurfl.io/ zu besuchen.

Kurz gesagt, wenn Sie eine winzige JavaScript-Datei importieren:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Sie erhalten ein JSON-Objekt, das wie folgt aussieht:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Vorausgesetzt, Sie verwenden natürlich ein Nexus 7) und Sie können Dinge tun wie:

if(WURFL.is_mobile) {
    //dostuff();
}

Das ist was Sie suchen.

Haftungsausschluss: Ich arbeite für das Unternehmen, das diesen kostenlosen Service anbietet.

Schauen Sie sich diesen Beitrag an , er enthält einen wirklich schönen Code-Ausschnitt darüber, was zu tun ist, wenn Touch-Geräte erkannt werden, oder was zu tun ist, wenn ein 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();
}

Hier ist eine Funktion, mit der Sie eine richtige / falsche Antwort erhalten können, ob Sie in einem mobilen Browser ausgeführt werden. Ja, es ist Browser-Sniffing, aber manchmal ist es genau das, was Sie brauchen.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

Alle Antworten verwenden User-Agent, um den Browser zu erkennen, aber die auf User-Agent basierende Geräteerkennung ist keine sehr gute Lösung. Besser ist es, Funktionen wie Touch-Geräte zu erkennen (in der neuen jQuery werden sie entfernt $.browserund $.supportstattdessen verwendet).

Um Mobiltelefone zu erkennen, können Sie nach Berührungsereignissen suchen:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Entnommen aus Wie lässt sich ein Touchscreen-Gerät am besten mit JavaScript erkennen?

Ich würde vorschlagen, die folgende Kombination von Zeichenfolgen zu verwenden, um zu überprüfen, ob der Gerätetyp verwendet wird.

Gemäß Mozilla-Dokumentation wird eine Zeichenfolge Mobiempfohlen. Einige der alten Tablets geben jedoch nicht true zurück, wenn sie nur Mobiverwendet werden. Daher sollten wir auch TabletZeichenfolgen verwenden.

In ähnlicher Weise für auf der sicheren Seite zu sein iPadund iPhonekönnte auch Art , das Gerät zu überprüfen verwendet werden Strings.

Die meisten neuen Geräte würden nur truefür MobiZeichenfolgen zurückgegeben.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

Sie können Medienabfragen verwenden, um diese problemlos verarbeiten zu können.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Tolle Antwort, danke. Kleine Verbesserung zur Unterstützung von Windows Phone und Zune:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

Benutze das:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Dann benutze dies:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Einfache Funktion basierend auf http://detectmobilebrowser.com/

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Wenn Sie zu einem Browser gelangen und versuchen, navigator.userAgent abzurufen, erhalten wir die folgenden Browserinformationen

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Das Gleiche gilt für Mobilgeräte, denen Sie folgen werden

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, wie Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Jeder mobile Browser verfügt über einen Benutzeragenten mit einer Zeichenfolge, die "Mobil" enthält. Daher verwende ich das obige Snippet in meinem Code, um zu überprüfen, ob der aktuelle Benutzeragent Web / Mobil ist. Basierend auf dem Ergebnis werde ich die erforderlichen Änderungen vornehmen.

ich benutze das

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Wie wäre es mit mobiledetect.net ?

Andere Lösungen scheinen zu einfach. Dies ist eine leichte PHP-Klasse. Es verwendet die User-Agent-Zeichenfolge in Kombination mit bestimmten HTTP-Headern, um die mobile Umgebung zu erkennen. Sie können auch von Mobile Detect profitieren, indem Sie Plugins von Drittanbietern verwenden, die für WordPress, Drupal, Joomla, Magento usw. verfügbar sind.

Benutzeragentenzeichenfolgen sollten nicht allein als vertrauenswürdig eingestuft werden. Die folgende Lösung funktioniert in allen Situationen.

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4)));
}

und rufen Sie diese Funktion auf:

isMobile(navigator.userAgent || navigator.vendor || window.opera)