So erkennen Sie ein mobiles Gerät mit jQuery

Lesezeit: 6 Minuten

Gibt es eine Möglichkeit zu erkennen, ob ein Benutzer ein mobiles Gerät in jQuery verwendet oder nicht? Etwas Ä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 $.browser Funktion ist nicht das was ich suche.

  • Geben Sie eine mobile URL speziell für Mobilgeräte an. So gehen die meisten großen Websites mit Mobilgeräten um. Sehen m.google.com.

    – Benutzer229044

    18. August 2010 um 17:27 Uhr

  • jQuery kann und kann nicht alles. Es bietet Cross-Browser-DOM-Traversal und -Manipulation, einfache Animation und Ajax zwischen Browsern und erstellt ein Skelett-Framework, auf dem Plugins aufbauen können. Bitte beachten Sie die Einschränkungen von jQuery, bevor Sie fragen speziell für eine jQuery-Lösung.

    – Yi Jiang

    22. August 2010 um 5:38 Uhr

  • Benutzeragenten sind ständig in Bewegung befindliche Ziele, jeder, der diesen Beitrag liest, sollte sich vor dem Ausspähen von Benutzeragenten sehr in Acht nehmen

    – Rauben

    9. Januar 2012 um 10:38 Uhr


  • Was ist ein „mobiles“ Gerät? Handelt es sich um ein Gerät, das Touch unterstützt (einschließlich Chrome Pixel und Windows 8-Laptops mit Maus)? Handelt es sich um ein Gerät mit kleinem Bildschirm (was ist mit Retina-iPads)? Ist es ein Gerät mit einer langsamen CPU? Oder ein Gerät mit einer langsamen Internetverbindung? Je nachdem, was Sie tun möchten, wird die Antwort auf diese Frage unterschiedlich sein. Die Zielbildschirmauflösung oder Berührung ist einfach. Wenn Sie für einige Geräte kleinere Inhalte oder weniger intensives JS bereitstellen möchten, gibt es keine Wunderwaffe. Testen Sie auf window.navigator.connection und greifen Sie auf das (böse, schlechte, schlecht beratene) UserAgent-Sniffing zurück. Meine 2 Cent.

    – David Gilbertson

    9. Juli 2013 um 4:42 Uhr

  • @Cole”Cole9″Johnson Genau mein Punkt. „Mobile“ scheint als Überbegriff für Touch, langsame CPU, langsames Netzwerk und kleinen Bildschirm verwendet zu werden. Aber keine davon sind perfekte Annahmen. Ich glaube, dass die individuelle Betrachtung dieser Faktoren zu einem besseren Produkt führen wird, als das Entwerfen für ein vages Konzept von „mobil“. Daher stelle ich diese Frage dem OP.

    – David Gilbertson

    20. August 2013 um 2:38 Uhr

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 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-freundlich” zu machen. Also verwende ich CSS Media Queries, um Elemente je nach Bildschirmgröße ein-/auszublenden.

Zum Beispiel möchte ich in meiner mobilen Version die Facebook Like Box nicht aktivieren, weil sie all diese Profilbilder und solche Sachen lädt. Und das ist nicht gut für mobile Besucher. Neben dem Ausblenden des Container-Elements mache ich dies also 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 sehen unter http://lisboaautentica.com

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

Update von dekin88

Zur Erkennung von Medien ist eine JavaScript-API 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ützt: 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 bedingt zielgerichtet ansprechen können, ohne Dummy-Elemente in das DOM einfügen zu müssen.

  • -1 Die screen.width Eigentum ist ein globales. Es besteht keine Notwendigkeit, dem DOM willkürlich ein Element hinzuzufügen und unnötigerweise CSS-Medienabfragen einzufügen. Wenn sich der Browser auf einem Desktop befindet und der Benutzer die Größe des Fensters ändert, $is_mobile wird nicht aktualisiert.

    – merv

    9. November 2012 um 15:46 Uhr


  • Warum nicht: if( screen.width <= 480 ) { // is mobile }

    – andrewrjones

    20. Januar 2013 um 1:05 Uhr


  • Sie haben gerade neu erfunden window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia

    – Paul Irisch

    26. Februar 2014 um 19:27 Uhr

  • Die Bootstrap/Jquery-Technik ist sehr gut, wenn sie in eine Funktion eingefügt wird. Rufen Sie einfach bei geänderter Bildschirmausrichtung oder bei Größenänderung auf.

    – Das Prägnante

    18. Februar um 18:55 Uhr


  • Der verlinkte Artikel erwähnt: Wenn das Gerät groß genug ist, dass es nicht mit „Mobi“ gekennzeichnet ist, sollten Sie Ihre Desktop-Site bereitstellen (die als bewährte Methode sowieso Berührungseingaben unterstützen sollte, da immer mehr Desktop-Computer mit Touchscreens erscheinen).

    – Daniel Hanrahan

    9. Juni 2016 um 13:27 Uhr

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

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

  • Was ist mit Windows-Laptops mit Touchscreen?

    – Chris Cinelli

    26. Dezember 2013 um 23:23 Uhr

  • Der Zweite isMobile Funktion, die Sie bereitgestellt haben, gibt zurück true auf meinem Desktop-Gerät!! (Google Chrome v44.0)

    – Lukas

    22. August 2015 um 11:26 Uhr


  • Dies ist eher eine isTouchSupported-Methode, nicht wirklich eine mobile Erkennung.

    – Barkermn01

    1. Mai 2016 um 16:04 Uhr

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

Es bietet Skripte zur Erkennung mobiler Browser in mehreren Sprachen, darunter JavaScript. Das kann dir bei deiner Suche helfen.

Da Sie jedoch jQuery verwenden, sollten Sie sich der jQuery.support-Sammlung bewusst sein. Es ist eine Sammlung von Eigenschaften zum Erkennen der Fähigkeiten des aktuellen Browsers. Dokumentation ist 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 sein wird.

Abgesehen davon denke ich, dass Sie am besten entweder umleiten oder ein anderes Skript für die Ausgabe mit einer serverseitigen Sprache schreiben (falls dies eine Option ist). Da Sie die Fähigkeiten eines mobilen Browsers x nicht wirklich kennen, wäre die Ausführung der Erkennungs- und Änderungslogik auf der Serverseite die zuverlässigste Methode. All das ist natürlich ein strittiger Punkt, wenn Sie keine serverseitige Sprache verwenden können 🙂

  • Was ist mit Windows-Laptops mit Touchscreen?

    – Chris Cinelli

    26. Dezember 2013 um 23:23 Uhr

  • Der Zweite isMobile Funktion, die Sie bereitgestellt haben, gibt zurück true auf meinem Desktop-Gerät!! (Google Chrome v44.0)

    – Lukas

    22. August 2015 um 11:26 Uhr


  • Dies ist eher eine isTouchSupported-Methode, nicht wirklich eine mobile Erkennung.

    – Barkermn01

    1. Mai 2016 um 16:04 Uhr

Manchmal möchte man wissen, welches Markengerät ein Kunde verwendet, um spezifische Inhalte für dieses Gerät anzuzeigen, z. B. einen Link zum iPhone Store oder zum Android Market. Modernizer ist großartig, zeigt Ihnen aber 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 ist von Graphics Maniacs
http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

1315970cookie-checkSo erkennen Sie ein mobiles Gerät mit jQuery

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy