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




modernizr detect mobile (20)

Alle Antworten verwenden User-Agent, um den Browser zu erkennen, aber Geräteerkennung basierend auf User-Agent ist keine sehr gute Lösung, besser ist es, Features wie Touch-Gerät zu erkennen (in neuen jQuery entfernen sie $.browser und verwenden $.support ).

Um ein Handy 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 Was ist der beste Weg, ein "Touchscreen" -Gerät mit JavaScript zu erkennen?

https://code.i-harness.com

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.


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 wird $.browser "device" für alle oben genannten Geräte zurückgeben

Hinweis: $.browser wurde in jQuery v1.9.1 entfernt . Aber Sie können dies verwenden, indem Sie jQuery Migration Plugin 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;
}

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. Daher biete ich diese zweite Version an, basierend auf @Julian-Lösung :

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

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


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

Ich bin überrascht, dass niemand auf eine nette Website hingewiesen hat: http://detectmobilebrowsers.com/ Es hat bereits 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

Und wenn Sie die Tablets ebenfalls erkennen müssen, überprüfen Sie den Abschnitt Über den zusätzlichen RegEx-Parameter.

Android-Tablets, iPads, Kindle Fires und PlayBooks werden vom Design nicht erkannt. Um Unterstützung für Tablets hinzuzufügen, fügen Sie |android|ipad|playbook|silk zur ersten Regex hinzu.


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

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

Zum Beispiel in Bootstrap (Mobile First) Media Queries gibt es 4 Snap / Break-Punkte:

  • Extra Small Devices sind 768 Pixel und darunter.
  • Kleine Geräte reichen von 768 bis 991 Pixel.
  • Medium-Geräte reichen von 992 bis 1199 Pixel.
  • Große Geräte sind 1200 Pixel und höher.

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

Zuerst werden wir eine Funktion erstellen, die die Fenstergröße erhält 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"
    }
};

Jetzt, da wir die Funktion eingerichtet haben, können wir es nennen 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 befindet.

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

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 von Javascript:

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

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


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 ist von Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


Mit dieser Funktion können Sie eine echte / falsche Antwort darauf erhalten, ob Sie mit einem mobilen Browser arbeiten. Ja, es ist Browser-Sniffing, aber manchmal ist das 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;
}

Sie können sich nicht auf navigator.userAgent , nicht jedes Gerät zeigt sein echtes Betriebssystem. Auf meinem HTC zum Beispiel hängt es von den Einstellungen ab ("mobile Version verwenden" an / aus). Auf http://my.clockodo.com verwendeten wir einfach screen.width , um kleine Geräte zu erkennen. Leider gibt es in einigen Android-Versionen 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");
}

Um eine zusätzliche Kontrollebene hinzuzufügen, verwende ich den HTML5-Speicher, um festzustellen, ob mobiler Speicher oder Desktopspeicher verwendet wird. Wenn der Browser keinen Speicher unterstützt, habe ich ein Array von mobilen Browser-Namen und vergleiche den Benutzer-Agent 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 Sie Modernizr , ist es sehr einfach, Modernizr.touch wie bereits erwähnt zu verwenden.

Ich bevorzuge jedoch eine Kombination aus Modernizr.touch und User Agent Testing, 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 oben beschriebene Modernizr.touch Funktion durch ('ontouchstart' in document.documentElement) ersetzen.

Beachten Sie auch, dass das Testen des Benutzeragenten iemobile Ihnen eine iemobile Auswahl erkannter Microsoft-Mobilgeräte als Windows Phone iemobile .

Siehe auch diese SO Frage


Wenn Sie sich nicht 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 Seite hochgeworfen. Es ist vielleicht nicht der perfekte Weg, aber es wird wahrscheinlich am einfachsten für mehrere Geräte zu erkennen sein. Möglicherweise müssen Sie ein bestimmtes für das iPhone 4 (große Auflösung) eingeben.


Great answer thanks. Small improvement to support Windows phone and 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";
               }

How about mobiledetect.net ?

Other solutions seem too basic. This is a lightweight PHP class. It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment. You can also benefit from Mobile Detect by using any of the 3rd party plugins available for: WordPress, Drupal, Joomla, Magento, etc.


I tried some of the ways and then I decided to fill a list manually and do a simple JS check. And in the end the user has to confirm. Because some checks gave false positive or negative.

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;

Now, if you want to use jQuery to set the CSS, you could do the following:

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

Since the borders between mobile and fixed devices become fluent and mobile browers are already powerful, checking width and user confirmation will probably be the best for the future (assuming that width in some cases will still be important). Because touches are already converted into mouse-ups and downs.

And concerning the mobile movability, I suggest you to think about Yoav Barnea's idea :

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

Knowing that TouchEvent is only for mobile devices, Maybe the simplest way could be check if user device can support it:

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

User agent strings should not be trusted alone. Solution below will work in all situations.

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

and call this function:

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

You can also detect it like below

$.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"));
};




browser-detection