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



js function (25)

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.


Answers

I advise you check out http://wurfl.io/

In a nutshell, if you import a tiny JavaScript file:

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

You will be left with a JSON object that looks like:

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

(That's assuming you are using a Nexus 7, of course) and you will be able to do things like:

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

This is what you are looking for.

Disclaimer: I work for the company that offers this free service.


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

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

You could also use server side script and set javascript variables from it.

Example in php

download http://code.google.com/p/php-mobile-detect/ and then set javascript variables.

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

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)

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


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

Then use this:

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

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.


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 unter http://lisboaautentica.com in Aktion sehen

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.


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

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/


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.


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.


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

Laut Mozilla - Browser Erkennung mit dem User 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.


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


Wenn du mit "Handy" meinen "kleinen Bildschirm" meinst, benutze ich folgendes:

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

Auf dem iPhone werden Sie mit einer window.screen.width von 320 enden. Auf Android werden Sie mit einer window.outerWidth von 480 enden (obwohl das vom Android abhängen kann). iPads und Android-Tablets geben Zahlen wie 768 zurück, damit sie die volle Ansicht anzeigen, wie Sie es möchten.


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

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 wie http://www.modernizr.com/ können dabei helfen.

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


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

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.


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

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

Anstatt den gleichen Code überall zu wiederholen, würde ich vorschlagen, dass es wünschenswert ist, eine eigene jQuery-Funktion zu schreiben, wie:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('<option>', { value: key }).text(value));
};

Um dann eine Option hinzuzufügen, machen Sie folgendes:

$('select').addOption('0', 'None');




javascript jquery mobile browser-detection