Frage Was ist der beste Weg, ein mobiles Gerät in jQuery zu erkennen?


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

Die jQuery $.browser Funktion ist nicht das, was ich suche.


1362


Ursprung


Antworten:


Anstatt jQuery zu verwenden, können Sie einfaches JavaScript verwenden, um es zu erkennen:

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

Oder Sie können beide kombinieren, um sie durch jQuery zugänglicher zu machen ...

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

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

Hinweis: $.browser entfernt auf jQuery v1.9.1. Sie können dies jedoch mithilfe des jQuery-Migrations-Plugins verwenden Code


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

1732



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 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 machen. Also benutze ich CSS Media Queries zeigen / verbergen Elemente abhängig von der Bildschirmgröße.

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

Ich arbeite immer noch an der mobilen Version, also sieht es immer noch nicht so aus, wie es sollte.

Aktualisierung von dekin88

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

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

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

Browser unterstützt:  http://caniuse.com/#feat=matchmedia

Der Vorteil dieser Methode besteht darin, dass sie nicht nur einfacher und kürzer ist, sondern Sie auch verschiedene Geräte wie Smartphones und Tablets bei Bedarf gezielt ansprechen können, ohne dass Dummy-Elemente in das DOM eingefügt werden müssen.


411



Gemäß Mozilla - Browser-Erkennung mit dem Benutzer-Agent:

Zusammenfassend empfehlen wir, die Zeichenfolge "Mobi" an einer beliebigen Stelle im User Agent zu suchen, um ein mobiles Gerät zu erkennen.

So was:

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

Dies entspricht allen gängigen mobilen Browser-Benutzeragenten, einschließlich Mozilla, Safari, IE, Opera, Chrome usw.

Update für Android

EricL empfiehlt das Testen für Android als Benutzer-Agent auch, als die Chrome-User-Agent-Zeichenfolge für Tablets enthält nicht "Mobi" (die Telefonversionen tun jedoch):

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

176



Was Sie tun, wenn Sie ein mobiles Gerät erkennen möchten, kommt einem "Browser-Sniffing" -Konzept IMO ein wenig zu nahe. Es wäre wahrscheinlich viel besser, eine Merkmalserkennung durchzuführen. Bibliotheken mögen http://www.modernizr.com/ kann dabei helfen.

Wo ist beispielsweise die Grenze zwischen mobil und nicht-mobil? Es wird jeden Tag mehr und mehr verschwommen.


74



Ein einfacher und effektiver One-Liner:

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

Der obige Code berücksichtigt jedoch nicht den Fall für Laptops mit Touchscreen. Somit biete ich diese zweite Version an, basierend auf @ Julian Lösung:

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

72



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

Es bietet Skripte zur Erkennung von mobilen Browsern in mehreren Sprachen, von denen eine JavaScript ist. Das kann dir bei dem helfen, wonach du suchst.

Da Sie jQuery verwenden, sollten Sie sich jedoch 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 weiß, was genau Sie erreichen wollen, weiß ich nicht, welche davon am nützlichsten ist.

Alles in allem, denke ich, ist es am besten, entweder ein anderes Skript mit einer serverseitigen Sprache umzuleiten oder ein anderes Skript in die Ausgabe zu schreiben (wenn das eine Option ist). Da Sie die Fähigkeiten eines mobilen Browsers x nicht wirklich kennen, wäre die Ermittlung und Änderung der Logik auf der Serverseite die zuverlässigste Methode. Natürlich ist all das ein strittiger Punkt, wenn Sie keine serverseitige Sprache verwenden können :)


59



Manchmal ist es wünschenswert zu wissen, welches Markengerät ein Client verwendet, um Inhalte zu zeigen, die für dieses Gerät spezifisch sind, wie zum Beispiel einen Link zum iPhone Store oder zum Android Market. Modernisierer ist großartig, zeigt 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 stammt von Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


45



Gefunden eine Lösung 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 dann, um zu überprüfen, ob es ein Mobile ist, können Sie testen mit:

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

39