Was ist der beste Weg, um ein Mobilgerät in jQuery zu erkennen?

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

In 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 "mobile friendly" zu haben. Daher verwende ich CSS-Medien. Abfragen zeigen/verbergen Elemente abhängig von der Bildschirmgröße.

In meiner mobilen Version möchte ich zum Beispiel die Facebook-Like-Box nicht aktivieren, da sie all diese Profilbilder und -materialien 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, also sieht es immer noch nicht so aus, wie es sein sollte, als würde ich das schreiben.

Update von dekin88

Es ist eine JavaScript-API zum Erkennen von Medien integriert. Verwenden Sie statt der obigen Lösung einfach Folgendes:

$( document ).ready(function() {      
    var 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 ist, dass sie nicht nur einfacher und kürzer ist, sondern dass Sie verschiedene Geräte wie Smartphones und Tablets bei Bedarf separat ansteuern können, ohne Dummy-Elemente hinzufügen zu müssen.

Gemäß Mozilla - Browsererkennung mit dem Benutzeragenten :

Zusammenfassend empfehlen wir, an einer beliebigen Stelle 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 gilt für alle gängigen Benutzeragenten für mobile Browser, einschließlich Mozilla, Safari, IE, Opera, Chrome usw. von Mobile Browser.

Update für Android

EricL empfiehlt, Android auch als Benutzeragent zu testen, da der Chrome-Benutzeragent-String für Tablets "Mobi" nicht enthält (die Telefonversionen jedoch):

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

Ein einfacher und effektiver Einliner:

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 bereit, basierend auf @Julian Lösung :

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

Was Sie tun, wenn Sie ein mobiles Gerät erkennen möchten, kommt einem IMO-Konzept des "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 ist zum Beispiel die Grenze zwischen mobil und nicht mobil? Es wird jeden Tag immer verschwommener.

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

Es bietet Skripts zum Erkennen von mobilen Browsern in mehreren Sprachen. Eine davon ist JavaScript. Das kann Ihnen helfen, wonach Sie suchen.

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

Da ich nicht weiß, was genau Sie erreichen wollen, weiß ich nicht, welches davon am nützlichsten ist.

Ich denke, Ihre beste Wette ist, entweder ein anderes Skript mit einer serverseitigen Sprache zur Ausgabe umzuleiten oder zu schreiben (falls dies eine Option ist). Da Sie die Fähigkeiten eines mobilen Browsers x nicht wirklich kennen, ist die Erkennung und Änderungslogik auf Serverseite die zuverlässigste Methode. Natürlich ist das alles ein umstrittener Punkt, wenn Sie keine serverseitige Sprache verwenden können :)

Manchmal ist es wünschenswert zu wissen, welches Markengerät ein Kunde verwendet, um Inhalte anzuzeigen, die für dieses Gerät spezifisch sind, beispielsweise eine Verbindung zum iPhone-Store oder zum Android-Markt. Modernizer ist großartig, zeigt 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());
    }
};

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

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

Wenn Sie mit "mobil" "kleiner Bildschirm" meinen, verwende ich Folgendes:

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

Auf dem iPhone erhalten Sie ein window.screen.width von 320. Unter Android erhalten Sie ein window.outerWidth von 480 (obwohl dies vom Android abhängen kann). iPads und Android-Tablets geben Zahlen wie 768 zurück, damit sie die volle Sicht haben, wie Sie möchten.

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

Ich bevorzuge jedoch die Verwendung einer Kombination aus Modernizr.touch und User Agent-Tests, nur um sicher zu sein.

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

Beachten Sie auch, dass das Testen des Benutzeragenten iemobile Ihnen eine größere Auswahl an erkannten mobilen Microsoft-Geräten bietet als Windows Phone.

Siehe auch diese SO Frage

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

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

In den Bootstrap-Medienabfragen (Mobile First) gibt es beispielsweise vier Fang- und Haltepunkte:

• Extra kleine Geräte haben 768 Pixel und darunter.
• Kleine Geräte reichen von 768 bis 991 Pixel.
• Mittlere Geräte reichen von 992 bis 1199 Pixel.
• Große Geräte haben 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 Gerätegröße unsere 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"
    }
};

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

var device = getBrowserWidth();

Deine Frage war

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

Jetzt, da wir die Geräteinformationen haben, bleibt nur noch eine if-Anweisung:

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

Hier ein Beispiel zu CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Sie können sich nicht auf navigator.userAgent verlassen, nicht jedes Gerät enthüllt sein echtes Betriebssystem. Auf meinem HTC hängt es zum Beispiel von den Einstellungen ab ("using mobile version" ein/aus) . Bei http://my.clockodo.com haben wir einfach screen.width zur Erkennung kleiner Geräte verwendet. In einigen Android-Versionen gibt es leider einen Fehler mit screen.width. Sie können diesen Weg 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 bin überrascht, dass niemand auf eine Nice-Website hingewiesen hat: http://detectmobilebrowsers.com/ Es hat Code in verschiedenen Sprachen für die mobile Erkennung (einschließlich aber nicht beschränkt auf) erstellt:

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

Wenn Sie auch die Tablets erkennen müssen, überprüfen Sie den Abschnitt "Info", um zusätzliche RegEx-Parameter zu erhalten.

Android-Tablets, iPads, Kindle Fires und PlayBooks werden von .__ nicht erkannt. Design. Fügen Sie |Android|ipad|playbook|silk zu .__ hinzu, um Unterstützung für Tablets hinzuzufügen. die erste Regex.

Wenn Sie sich nicht besonders um kleine Displays sorgen, können Sie die Breiten-/Höhenerkennung verwenden. Wenn also die Breite unter einer bestimmten Größe liegt, wird die mobile Site hochgefahren. Dies ist möglicherweise nicht der perfekte Weg, aber es ist wahrscheinlich am einfachsten, mehrere Geräte zu erkennen. Möglicherweise müssen Sie einen speziellen für das iPhone 4 eingeben (große Auflösung). 

In einer Zeile von Javascript:

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

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

Ich empfehle Ihnen einen Blick auf http://wurfl.io/

Kurz gesagt, wenn Sie eine kleine 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"
}

(Das setzt natürlich voraus, dass Sie ein Nexus 7 verwenden) und Sie können Folgendes tun:

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

Das ist was Sie suchen.

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

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;
}

Mit dieser Funktion können Sie eine wahr/falsch-Antwort erhalten, ob Sie einen mobilen Browser verwenden. 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;
}

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

Gemäß Mozilla-Dokumentation wird empfohlen string Mobi. Einige der alten Tablets geben jedoch nicht true zurück, wenn nur Mobi verwendet wird. Daher sollten auch Tablet string verwendet werden.

Um auf der sicheren Seite zu sein, könnten iPad- und iPhone-Zeichenfolgen ebenfalls zur Überprüfung des Gerätetyps verwendet werden.

Die meisten neuen Geräte würden true allein für Mobi string zurückgeben.

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

Schauen Sie sich dieses post an, es gibt ein wirklich schönes Code-Snippet, 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();
}

Zu wissen, dass TouchEvent nur für mobile Geräte gilt, ist der einfachste Weg möglicherweise die Überprüfung, ob ein Benutzergerät dies unterstützt:

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

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

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 folgendes:

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

Alle Antworten verwenden den Benutzeragenten, um den Browser zu erkennen, aber die Geräteerkennung auf Basis des Benutzeragenten ist keine sehr gute Lösung. Besser ist es, Funktionen wie das Touchgerät zu erkennen (in jQuery entfernen sie $.browser und verwenden stattdessen $.support).

Um Mobile zu erkennen, können Sie nach Touch-Ereignissen suchen:

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

Entnahme aus Wie kann ich ein Touchscreen-Gerät mithilfe von JavaScript am besten erkennen?

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";
               }

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

Wenn Sie zu einem beliebigen Browser wechseln und versuchen, navigator.userAgent abzurufen, erhalten Sie die Browser-Informationen in etwa wie folgt

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 mobile Gerä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 Mobil Safari/537.36

Jeder mobile Browser verfügt über einen Benutzeragenten mit einer Zeichenfolge, die "Mobile" enthält. In meinem Code verwende ich daher über den Codeausschnitt, um zu prüfen, ob der aktuelle Benutzeragent web/mobile ist. Anhand des Ergebnisses werde ich die erforderlichen Änderungen vornehmen.

Wenn festgestellt wird, dass die Überprüfung von navigator.userAgent nicht immer zuverlässig ist. Durch die Überprüfung von navigator.platform kann eine höhere Zuverlässigkeit erreicht werden. 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...
}

Sie können die Medienabfrage verwenden, um leicht damit umgehen zu können.

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

Benutzeragenten-Zeichenfolgen sollten nicht alleine vertrauenswürdig sein. Die Lösung unten 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)

Dies ist mein Code, den ich in meinen Projekten verwende:

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|Kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}

Wie wäre es mit mobiledetect.net ?

Andere Lösungen scheinen zu einfach. Dies ist eine leichtgewichtige 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 eines der Plugins von Drittanbietern verwenden, die für WordPress, Drupal, Joomla, Magento usw. verfügbar sind.

Sie können es auch wie folgt erkennen

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("Android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("Android") > -1 && !(ua.indexOf("mobile"));
};

Sie können auch serverseitige Skripts verwenden und Javascript-Variablen festlegen. 

Beispiel in php

download http://code.google.com/p/php-mobile-detect/ und setzen Sie dann Javascript-Variablen. 

<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>

Ich benutze das 

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

Ich habe einige der Möglichkeiten ausprobiert und dann beschlossen, eine Liste manuell auszufüllen und einen einfachen JS-Check durchzuführen. Und am Ende muss der Benutzer bestätigen. Weil einige Schecks falsch positiv oder negativ ausfielen.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Wenn Sie jQuery zum Festlegen des CSS verwenden möchten, können Sie Folgendes tun:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

Da die Grenzen zwischen mobilen und festen Geräten fließend werden und mobile Browser bereits leistungsfähig sind, sind die Überprüfung der Breite und die Bestätigung durch den Benutzer wahrscheinlich die besten für die Zukunft (vorausgesetzt, die Breite wird in einigen Fällen immer noch wichtig sein). Denn Berührungen werden bereits in Maus-Ups und -Downs umgewandelt.

Und in Bezug auf die mobile Beweglichkeit empfehle ich Ihnen, über die Idee von Yoav Barnea nachzudenken :

if(typeof window.orientation !== 'undefined'){...}

Checkout http://detectmobilebrowsers.com/ bietet Ihnen ein Skript zum Erkennen von Mobilgeräten in verschiedenen Sprachen, einschließlich

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C #, ColdFusion und viele mehr

Außerdem empfehle ich die kleine JavaScript-Bibliothek Bowser, ja nein r. Es basiert auf dem navigator.userAgent und ist für alle Browser einschließlich iPhone, Android usw. gut getestet.

https://github.com/ded/bowser

Sie können einfach sagen:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.Android){
  alert('Hello mobile');
}

function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}

Hier ist ein weiterer Vorschlag, der mit reinem JavaScript (es6) implementiert wird.

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();

var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  Android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.Android() || this.webOS();
  }
};

Ich habe so etwas in der Vergangenheit benutzt. Dies ähnelt einer vorherigen Antwort, ist jedoch technisch performanter, da das Ergebnis der Übereinstimmung zwischengespeichert wird, insbesondere wenn die Erkennung in einer Animation, einem Scroll-Ereignis oder dergleichen verwendet wird.

Hinzufügen:

In einigen Versionen von iOS 9.x zeigt Safari das "iPhone" nicht in navigator.userAgent, sondern zeigt es in navigator.platform.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }

Dies scheint eine umfassende, moderne Lösung zu sein:

https://github.com/matthewhudson/device.js

Es erkennt mehrere Plattformen, Smartphone vs. Tablets und Orientierung. Außerdem werden dem BODY-Tag Klassen hinzugefügt, sodass die Erkennung nur einmal erfolgt und Sie mit einer einfachen Reihe von jQuery-hasClass-Funktionen lesen können, auf welchem ​​Gerät Sie sich gerade befinden.

Hör zu...

[DISCLAIMER: Ich habe nichts mit der Person zu tun, die es geschrieben hat.]

Wenn Sie unter einem mobilen Gerät ein berührbares Gerät verstehen, können Sie dies anhand der Existenz von Touch-Handlern feststellen:

let deviceType = (('ontouchstart' in window)
                 || (navigator.maxTouchPoints > 0)
                 || (navigator.msMaxTouchPoints > 0)
                 ) ? 'touchable' : 'desktop';

jQuery wird dafür nicht benötigt.

Ich kenne diese alte Frage und es gibt viele Antworten, aber ich denke, diese Funktion ist einfach und hilft, alle mobilen Geräte, Tablets und Computerbrowser zu erkennen, die wie ein Zauber wirken.

function Device_Type() 
{
    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|Android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|Java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|Palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
    {
        if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        {
            Return_Device = 'Tablet';
        }
        else
        {
            Return_Device = 'Mobile';
        }
    }
    else if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    {
        Return_Device = 'Tablet';
    }
    else
    {
        Return_Device = 'Desktop';
    }

    return Return_Device;
}

http://www.w3schools.com/jsref/prop_nav_useragent.asp

Filtern nach Plattformname.

Ex:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


} 

^^

Einfach, aber ausreichend, um das Laden größerer Ressourcen wie Videodateien auf Handys oder Tablets/Desktops einzuschränken. Achten Sie einfach auf eine geringe Breite oder Höhe, um beide Ausrichtungen abzudecken. Wenn die Größe des Desktop-Browsers geändert wurde, kann das folgende Beispiel fälschlicherweise ein Telefon erkennen, aber das ist in Ordnung/nahe genug für meinen Anwendungsfall.

Warum 480, bcs, das sieht ungefähr so ​​aus, basierend auf den Informationen, die ich zu den Geräteabmessungen des Telefons gefunden habe.

if(document.body.clientWidth < 480 || document.body.clientHeight < 480) {
  //this is a mobile device
}

Je nachdem, was für Sie mobil sein möchte (was bedeutet, dass dieser Vorschlag nicht für jedermanns Bedürfnisse geeignet ist), können Sie möglicherweise eine Unterscheidung erzielen, indem Sie den Millisekunden-Unterschied zwischen einem Haus und dem Zimmer, wie ich es in diese Antwort) beschrieben habe, betrachten .

Dies sind alle Werte, die mir bekannt sind. Bitte helfen Sie bei der Aktualisierung des Arrays, wenn Sie andere Werte kennen.

function ismobile(){
   if(/Android|webos|iphone|ipad|iPod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
       return true;
   }
   else
    return false;
}

Ich mache das für meine .NET-Anwendungen.

In meiner freigegebenen _Layout.cshtml Seite füge ich dies hinzu.

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

So überprüfen Sie eine Seite auf Ihrer Website (jQuery):

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>