Erkennen eines mobilen Browsers

888

Ich suche nach einer Funktion, die einen booleschen Wert zurückgibt, wenn der Benutzer einen mobilen Browser hat oder nicht.

Ich weiß, dass ich navigator.userAgentdiese Funktion mithilfe von Regex verwenden und schreiben kann , aber Benutzeragenten sind für verschiedene Plattformen zu unterschiedlich. Ich bezweifle, dass es einfach wäre, alle möglichen Geräte zu finden, und ich denke, dass dieses Problem schon oft gelöst wurde, daher sollte es eine vollständige Lösung für diese Aufgabe geben.

Ich habe mir diese Site angesehen , aber leider ist das Skript so kryptisch, dass ich keine Ahnung habe, wie ich es für meinen Zweck verwenden soll, nämlich eine Funktion zu erstellen, die true / false zurückgibt.

ave
quelle
2
Versuchen Sie dies zu lesen. stackoverflow.com/questions/743129/…
KyelJmD
5
@ Thrustmaster: Das würde es wirklich nicht. Wenn Sie verschiedene JS für verschiedene Browser bereitstellen, müssen Sie Vary: User-AgentIhre Antwort ergänzen . Andernfalls wird beim Zwischenspeichern von Proxys eine Version gespeichert und an die andere Art von Browser gesendet. Aber Vary: User-Agentmacht die Antwort im IE nicht zwischenspeicherbar.
Bobince
17
@ave: Was versuchst du zu tun, indem du einen "mobilen" Browser erkennst? Die Unterscheidung ist in der heutigen Welt der Tablets und Hybridcomputer sehr umstritten. Möchten Sie kleine Bildschirme erkennen und in diesem Fall eine andere Benutzeroberfläche anzeigen? Möchten Sie Konnektivität mit geringer Bandbreite erkennen? Möchten Sie Touch-Interfaces erkennen?
Bobince
2
Daher habe ich meine Antwort aktualisiert, um die Javascript-Methode von detectmobilebrowsers.com zu verwenden, aber einen booleschen Wert zurückzugeben, wenn jemand dies noch benötigt. (nur für den Fall). Happy Detecting :)
Michael Zaporozhets

Antworten:

1317

Verwenden von Regex (von detectmobilebrowsers.com ):

Hier ist eine Funktion, die einen wahnsinnig langen und umfassenden regulären Ausdruck verwendet, der einen trueoder falseWert zurückgibt , je nachdem, ob der Benutzer mit einem Mobiltelefon surft oder nicht.

window.mobileCheck = function() {
  let check = false;
  (function(a){if(/(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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

Für diejenigen, die Tabletten in diesen Test einbeziehen möchten (obwohl dies wohl nicht der Fall sein sollte), können Sie die folgende Funktion verwenden:

window.mobileAndTabletCheck = function() {
  let check = false;
  (function(a){if(/(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|android|ipad|playbook|silk/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))) check = true;})(navigator.userAgent||navigator.vendor||window.opera);
  return check;
};

Die ursprüngliche Antwort

Sie können dies tun, indem Sie einfach eine Liste von Geräten durchgehen und prüfen, ob die folgenden useragentÜbereinstimmungen vorliegen:

  function detectMob() {
    const toMatch = [
        /Android/i,
        /webOS/i,
        /iPhone/i,
        /iPad/i,
        /iPod/i,
        /BlackBerry/i,
        /Windows Phone/i
    ];

    return toMatch.some((toMatchItem) => {
        return navigator.userAgent.match(toMatchItem);
    });
}

Da Sie jedoch der Meinung sind, dass diese Methode unzuverlässig ist, können Sie davon ausgehen, dass jedes Gerät mit einer Auflösung von 800 x 600 oder weniger auch ein mobiles Gerät ist, wodurch Ihr Ziel noch weiter eingeschränkt wird (obwohl heutzutage viele mobile Geräte viel höhere Auflösungen haben).

dh

  function detectMob() {
    return ( ( window.innerWidth <= 800 ) && ( window.innerHeight <= 600 ) );
  }

Referenz:

Michael Zaporozhets
quelle
25
Hallo, ich habe gerade den Link detectmobilebrowsers.com auf meinem iPad 3, iOS 6.1.2, besucht und dort steht "Kein mobiler Browser erkannt".
Richard Lovejoy
49
@RichardLovejoy Beim Erstellen von Baustellen wird das iPad im Allgemeinen nicht als mobil angesehen.
Michael Zaporozhets
42
Auf der Info- Seite: Android-Tablets, iPads, Kindle Fires und PlayBooks werden vom Design her nicht erkannt. |android|ipad|playbook|silkFügen Sie dem ersten regulären Ausdruck hinzu , um Unterstützung für Tablets hinzuzufügen .
Gras Double
13
Google TV ist auch Android. Was macht ein Handy aus? Bildschirmgröße ? Berühren ? deviceOrientation? Wenn ich entwerfe, geht es eher um Mousehover oder nicht, große Boutons oder kleine Links. Also laufe ich
vorerst
31
Gawd, diese ganze Idee von Benutzeragenten ist schrecklich und muss wirklich, wirklich aufhören. Wir müssen wirklich aufhören, Kunden zu erlauben, gegen die Flut zu kämpfen, und uns einfach an Medienanfragen halten. Wenn sie Weiterleitungen basierend auf der Skalierung für bestimmte Seiten durchführen möchten, überprüfen Sie einfach den Bereich einer bestimmten Medienabfrage über JS, dh tylergaw.com/articles/reacting-to-media-queries-in-javascript
marksyzm
324

Wie wäre es mit:

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

... da Smartphones diese Eigenschaft normalerweise unterstützen und Desktop-Browser dies nicht tun.

BEARBEITEN : Wie @Gajus betonte, ist diese Lösung jetzt veraltet und sollte nicht verwendet werden ( https://developer.mozilla.org/en-US/docs/Web/API/Window/orientation ).

Yoav Barnea
quelle
14
Das ist wirklich super einzigartig und großartig. Stört es dich, wenn ich es meiner Antwort hinzufüge?
Michael Zaporozhets
77
Dies wird wahrscheinlich nicht lange funktionieren. 1) Tablets können anständige Bildschirmgrößen haben. Sie möchten, dass sie die vollständige Desktop-Website anzeigen, aber sie haben diese Eigenschaft. 2) Windows 8 ist da und damit eine Reihe von Laptops mit Touchscreen und rotierenden Bildschirmen.
Dave Hilditch
10
Was Ihren ersten Punkt zu Tablets mit anständigen Bildschirmgrößen betrifft - ich denke, Sie könnten die gleichen Argumente auch für alle anderen Lösungen vorbringen (ein Tablet mit großem Bildschirm, das als kleiner Bildschirm verfolgt wird). Auf jeden Fall besteht die Idee hier darin, nach Eigenschaften zu suchen, die von kleinen Geräten gemeinsam genutzt werden, anstatt den langen Code beizubehalten und bei jedem neuen Gerät / jeder neuen Version / jedem neuen Modell Regex hinzuzufügen. Ich denke, die Geräteerkennung gehört der Vergangenheit an, und heute müssen wir uns auf die Funktionserkennung konzentrieren. Ich werde mich wieder freuen, hier über eine geeignetere Immobilie für diese Angelegenheit zu
sprechen
2
Ich liebe es und funktioniert perfekt, danke. Für meine Lösung war ich gleich nach einfach.
Bojangles
40
window.orientationist eine veraltete Eigenschaft ( developer.mozilla.org/en-US/docs/Web/API/Window/orientation , compatible.spec.whatwg.org/#dom-window-orientation ), die einige mobile Browser aus unbekannten Gründen unterstützen . Dieselben Browser implementieren window.screen.orientation(was auch in Desktop-Browsern definiert ist). Ich kann nur davon ausgehen, dass dies window.orientationaus alten Gründen dort verbleibt und daher nicht in neuen Anwendungen verwendet werden sollte.
Gajus
115
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) || navigator.userAgent.match(/WPDesktop/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Wie benutzt man

if( isMobile.any() ) alert('Mobile');

So überprüfen Sie, ob sich der Benutzer auf einem bestimmten Mobilgerät befindet:

if( isMobile.iOS() ) alert('iOS');

Ref: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript

Erweiterte Version auf Github: https://github.com/smali-kazmi/detect-mobile-browser

Mudaser Ali
quelle
Warum nicht any()eine for ... in Schleife von ORed- isMobileMitgliedern erstellen ?
SomeShinyObject
@ChristopherW Ich hatte sein Plugin erstellt und den Code geändert, wie Sie empfohlen haben
Mudaser Ali
2
Vielleicht iOS vor BlackBerry () verschieben, nur um die häufigsten Fälle an die erste Stelle zu setzen und eine frühzeitige Rettungsaktion zusätzliche Verarbeitung zu sparen?
Rob_vH
2
@Rob_vH Ich hatte diesen Code mit einigen erweiterten Funktionen in github ( github.com/smali-kazmi/detect-mobile-browser ) eingefügt . Sie sind offen, Vorschläge auch dort zu senden
Mudaser Ali
1
@AkarshSatija Hat der Leistungsabfall dieser 5 Regex-Prüfungen tatsächlich Auswirkungen auf eine Ihrer Anwendungen? Ich wäre sehr überrascht, wenn es so wäre. Vorzeitige Optimierung kann Zeitverschwendung sein ...
trusktr
68

Hier ist eine einfache Lösung aus der Quelle der Schleuder von Facebook

var isMobile = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
if (isMobile) {
  /* your code here */
}
Santhosh
quelle
Nett. Sehr nützlich in bestimmten Situationen
Chuck Le Butt
Nützlich für die Erkennung eines Geräts, auf dem eine mobile App installiert werden könnte. Der Browser an sich interessiert Sie nicht. Nur das Gerät / Betriebssystem.
Charlie Reitzel
31

Kam hierher auf der Suche nach einer einfachen, sauberen Möglichkeit, "Touchscreen-Geräte" zu erkennen, die ich als Mobilgeräte und Tablets klassifiziere. Ich habe in den aktuellen Antworten keine saubere Wahl gefunden, aber Folgendes herausgefunden, das möglicherweise auch jemandem hilft.

var touchDevice = ('ontouchstart' in document.documentElement);

Bearbeiten : Um Desktops mit Touchscreen und Handys gleichzeitig zu unterstützen, können Sie Folgendes verwenden:

var touchDevice = (navigator.maxTouchPoints || 'ontouchstart' in document.documentElement);
Tigger
quelle
9
Was ist, wenn der Desktop-Monitor Touch unterstützt?
Anton Kuzmin
@HappyCoder Ich glaube, es liegt am Betriebssystem, dem Browser mitzuteilen, wann der Touchscreen auf einem Desktop aktiv ist. Ja, diese Prüfung sollte noch gültig sein.
Tigger
(+1) Mein Desktop, den ich jetzt verwende, verfügt jedoch über einen Touchscreen, für den er nicht immer konsistent ist touchstart|end|etc.
Cody
1
Der Bootstrap-Datepicker verwendet Folgendes: if (window.navigator.msMaxTouchPoints || 'ontouchstart' im Dokument) {this.input.blur (); }
JT Taylor
1
@JTTaylor Es sieht so aus, als würde Microsoft dies empfehlen navigator.maxTouchPoints (kein msPräfix). Es gibt auch einen MDN-Artikel zu überprüfen.
Tigger
20

Wie viele angegeben haben, ist es problematisch, sich auf das sich bewegende Ziel der Benutzeragentendaten zu verlassen. Gleiches gilt für die Zählung der Bildschirmgröße.

Mein Ansatz basiert auf einer CSS-Technik, um festzustellen, ob die Benutzeroberfläche berührungsempfindlich ist:

Wenn nur Javascript verwendet wird (Unterstützung durch alle modernen Browser), kann eine Medienabfrage leicht darauf schließen, ob das Gerät mobil ist .

function isMobile() {
    var match = window.matchMedia || window.msMatchMedia;
    if(match) {
        var mq = match("(pointer:coarse)");
        return mq.matches;
    }
    return false;
}
gsxrboy73
quelle
6
Was ist mit Laptops mit Touch-fähigen Displays?
Maxim
6
Ich würde nach! MatchMedia suchen ("(beliebiger Zeiger: gut)"). Stimmt mit mir überein. ("Keine Maus angeschlossen", anstatt "hat einen Touchscreen".
Sora2455
Dies funktioniert, während mein letztes Skript von Leuten ausgetrickst wird, die die Zoomfunktion des Browsers verwenden (z. B. ein Typ, mit dem ich auf einem 13-Zoll-Bildschirm mit 4K gesprochen habe, der auf 1080p gesunken ist und immer noch Zoom verwenden musste). Arbeitete auf meinem iPhone (Safari / Firefox) und Android-Geräte (Waterfox / Chrome / "Browser"). Auf jeden Fall viel zuverlässiger als alle höher bewerteten Antworten.
John
erkennt FireFox fennec auf einem Android-Gerät, für das ich navigator.userAgent.toLowerCase () ergänzt habe, nicht. indexOf ('fennec')> -1 (möglicherweise nicht die beste Ergänzung ..)
StayCool
2
Zusätzlich können Sie die Hover-Eigenschaft testen: für Smartphones und Touchscreens @media (Hover: keine) und (Zeiger: grob)
Batailley
16

Gemäß MDN-Artikel zur Browsererkennung mithilfe des Benutzeragenten wird empfohlen, diesen Ansatz nach Möglichkeit zu vermeiden und andere Möglichkeiten wie die Funktionserkennung vorzuschlagen.

Wenn man jedoch den Benutzeragenten als Mittel verwenden muss, um festzustellen, ob das Gerät mobil ist, schlagen sie vor:

Zusammenfassend empfehlen wir, irgendwo im User Agent nach der Zeichenfolge "Mobi" zu suchen, um ein mobiles Gerät zu erkennen.

Daher wird dieser Einzeiler ausreichen:

const isMobileDevice = window.navigator.userAgent.toLowerCase().includes("mobi");

[AKTUALISIEREN]:

Wie @ zenw0lf in den Kommentaren vorschlägt, wäre die Verwendung eines regulären Ausdrucks besser:

const isMobileDevice = /Mobi/i.test(window.navigator.userAgent)

TheDarkIn1978
quelle
.includesnicht sopport von IE-11
Pasha Oleynik
1
@ PashaOleynik eine Polyfüllung kann das beheben
Maxim
Nexus 7 Tablet mit Android hat nicht Mobilein der User Agent String
Alex Sorokoletov
@AlexSorokoletov Auch für den MDN-ArtikelIf the device is large enough that it's not marked with “Mobi”, you should serve your desktop site (which, as a best practice, should support touch input anyway, as more desktop machines are appearing with touchscreens).
TheDarkIn1978
1
Ich denke, das würde überall ohne Polyfills const isMobile = /Mobi/.test(window.navigator.userAgent)
funktionieren
14

Es gibt keine perfekte Lösung, um festzustellen, ob JS-Code in einem mobilen Browser ausgeführt wird, aber die folgenden beiden Optionen sollten in den meisten Fällen funktionieren.

Option 1: Browser-Sniffing

!function(a){var b=/iPhone/i,c=/iPod/i,d=/iPad/i,e=/(?=.*\bAndroid\b)(?=.*\bMobile\b)/i,f=/Android/i,g=/(?=.*\bAndroid\b)(?=.*\bSD4930UR\b)/i,h=/(?=.*\bAndroid\b)(?=.*\b(?:KFOT|KFTT|KFJWI|KFJWA|KFSOWI|KFTHWI|KFTHWA|KFAPWI|KFAPWA|KFARWI|KFASWI|KFSAWI|KFSAWA)\b)/i,i=/IEMobile/i,j=/(?=.*\bWindows\b)(?=.*\bARM\b)/i,k=/BlackBerry/i,l=/BB10/i,m=/Opera Mini/i,n=/(CriOS|Chrome)(?=.*\bMobile\b)/i,o=/(?=.*\bFirefox\b)(?=.*\bMobile\b)/i,p=new RegExp("(?:Nexus 7|BNTV250|Kindle Fire|Silk|GT-P1000)","i"),q=function(a,b){return a.test(b)},r=function(a){var r=a||navigator.userAgent,s=r.split("[FBAN");return"undefined"!=typeof s[1]&&(r=s[0]),s=r.split("Twitter"),"undefined"!=typeof s[1]&&(r=s[0]),this.apple={phone:q(b,r),ipod:q(c,r),tablet:!q(b,r)&&q(d,r),device:q(b,r)||q(c,r)||q(d,r)},this.amazon={phone:q(g,r),tablet:!q(g,r)&&q(h,r),device:q(g,r)||q(h,r)},this.android={phone:q(g,r)||q(e,r),tablet:!q(g,r)&&!q(e,r)&&(q(h,r)||q(f,r)),device:q(g,r)||q(h,r)||q(e,r)||q(f,r)},this.windows={phone:q(i,r),tablet:q(j,r),device:q(i,r)||q(j,r)},this.other={blackberry:q(k,r),blackberry10:q(l,r),opera:q(m,r),firefox:q(o,r),chrome:q(n,r),device:q(k,r)||q(l,r)||q(m,r)||q(o,r)||q(n,r)},this.seven_inch=q(p,r),this.any=this.apple.device||this.android.device||this.windows.device||this.other.device||this.seven_inch,this.phone=this.apple.phone||this.android.phone||this.windows.phone,this.tablet=this.apple.tablet||this.android.tablet||this.windows.tablet,"undefined"==typeof window?this:void 0},s=function(){var a=new r;return a.Class=r,a};"undefined"!=typeof module&&module.exports&&"undefined"==typeof window?module.exports=r:"undefined"!=typeof module&&module.exports&&"undefined"!=typeof window?module.exports=s():"function"==typeof define&&define.amd?define("isMobile",[],a.isMobile=s()):a.isMobile=s()}(this);

alert(isMobile.any ? 'Mobile' : 'Not mobile');

Dieser spezielle Browser-Sniffing-Code ist der einer Bibliothek namens isMobile .


Option 2: Fensterorientierung

Testen Sie, ob window.orientationdefiniert ist:

var isMobile = window.orientation > -1;
alert(isMobile ? 'Mobile' : 'Not mobile');


Hinweis

Nicht alle Touchscreen-Geräte sind mobil und umgekehrt. Wenn Sie also etwas speziell für den Touchscreen implementieren möchten, sollten Sie nicht testen, ob Ihr Browser auf einem mobilen Gerät ausgeführt wird, sondern ob das Gerät Touchscreen-Unterstützung bietet:

var hasTouchscreen = 'ontouchstart' in window;
alert(hasTouchscreen ? 'has touchscreen' : 'doesn\'t have touchscreen');

John Slegers
quelle
Orientierungsansatz ist wirklich nett! ))
Maxim
1
Ich mag Ihre window.orientationLösung, aber die Dokumente sagen, dass sie veraltet ist! developer.mozilla.org/en-US/docs/Web/API/Window/orientation
skwidbreth
3
Der Orientierungsansatz ist NICHT gut, da Windows 8 und höher die Ausrichtung ändern kann.
Heitor
Windows 8 und höher konzentrieren sich auf die Unterstützung von Mobiltelefonen, aber auch von Hybriden (Laptops, die in große Pads konvertiert werden können), weshalb die Ausrichtung als Erkennungsmethode fehlschlägt, auch wenn Moz sie nicht als veraltet bezeichnet.
Jeff Clayton
Es ist von Win 7 mit installierter Grafiksoftware und kann die Ausrichtung ändern, aber stellen Sie sich eine Frage, wer auf dem Desktop / Laptop eine andere Bildschirmausrichtung wie Hochformat anstelle von Querformat verwenden und i noch länger als 1 Minute verwenden kann. Niemand !!! Wenn Sie die Ausrichtung auf dem Desktop ändern, lesen Sie die Zeichen auf Ihrem Bildschirm von unten nach oben.
GirlCode
11

Hier ist eine userAgent-Lösung, die effizienter ist als Match ...

function _isMobile(){
    // if we want a more complete list use this: http://detectmobilebrowsers.com/
    // str.test() is more efficent than str.match()
    // remember str.test is case sensitive
    var isMobile = (/iphone|ipod|android|ie|blackberry|fennec/).test
         (navigator.userAgent.toLowerCase());
    return isMobile;
}
JeffJak
quelle
7
Die Testmethode unterscheidet nicht zwischen Groß- und Kleinschreibung, Ihre Regex jedoch. Sie könnten einfach für Groß- und Kleinschreibung ohne Berücksichtigung von Groß- und Kleinschreibung mit einem "i" am Ende /iphone|etc/i.test(navigator.userAgent)
markieren
11

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
    var mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile']; 
    for (var i in mobile) if (navigator.userAgent.toLowerCase().indexOf(mobile[i].toLowerCase()) > 0) return true;

    // nothing found.. assume desktop
    return false;
}
Rasmus Søborg
quelle
3
Ich habe noch nicht auf Mobilgeräten getestet, aber sessionStorage.desktopes gibt sie weder in Safari noch in Chrome oder Firefox (alle neuesten Versionen zum Zeitpunkt der Veröffentlichung). Sie erhalten jedoch eine Gegenabstimmung, da Ihre Lösung in eine bessere Richtung geht als andere. Aber vergessen Sie nicht zu verwenden , var mobile =statt mobile =.
Shuckster
3
Es ist auch eine gute Idee, indexOf nicht zu verwenden, wenn noch ältere Browser vorhanden sind, die diese Methode nicht unterstützen, oder eine Polyfüllung zu verwenden. Es ist nicht erforderlich, toLowerCase für eine Liste von Kleinbuchstaben zu verwenden, und dies ist auch nicht erforderlich, wenn Sie /ipad|iphone|etc/i.test(navigator.userAgent) anstelle der langsamen Schleife ausführen, die Sie dort oben haben.
Jeffrey Gilbert
10

Die Funktionserkennung ist viel besser, als herauszufinden, auf welchem ​​Gerät Sie sich befinden, und es ist sehr schwierig, mit neuen Geräten Schritt zu halten, die ständig herauskommen, wie in einer Bibliothek Modernizr informiert Sie darüber, ob eine bestimmte Funktion verfügbar ist oder nicht.

zadubz
quelle
18
Sie haben eine andere Frage beantwortet als die, die gestellt wurde. Anstatt "Wie kann ich ein Mobiltelefon erkennen?" Haben Sie geantwortet: "Wie kann ich bestimmte Funktionen erkennen?". Nicht jede Geräteerkennung dient der Funktionserkennung. Was wäre, wenn wir Statistiken über Geräte abrufen möchten? Dann nein, "Feature Detection" ist nicht "viel besser als [Gerät herausfinden]".
Jonathan Allard
1
Dies ist nicht die Antwort, aber es verdient mehr als nur einen Kommentar. Die Frage ist: Warum möchten Sie einen Browser erkennen und dann möchten Sie ihn wahrscheinlich nur aufgrund der (fehlenden) Berührung kennen. Responsive Webdesign reicht in den meisten, wenn nicht allen Fällen aus.
zweimal
8

Wie wäre es mit so etwas?

if(
    (screen.width <= 640) || 
    (window.matchMedia && 
     window.matchMedia('only screen and (max-width: 640px)').matches
    )
  ){
   // Do the mobile thing
}
stujo
quelle
Warum nicht einfach screen.widthstattdessen verwenden? Es scheint mir, dass das zuverlässiger ist als window.matchMedia.
John Slegers
Guter Punkt John, ich kann mich nicht genau erinnern, was ich damals gedacht habe. Es scheint unwahrscheinlich (wenn ich es mir jetzt ansehe), dass die zweite Klausel wahr zurückgibt, wenn die erste falsch ist. Es muss einen Grund gegeben haben, warum ich es hinzugefügt habe.
stujo
Die meisten anständigen Programmierer schämen sich, wenn sie Code sehen, den sie ein Jahr zuvor selbst geschrieben haben. Diejenigen, die nicht nur als Programmierer gewachsen sind ;-)
John Slegers
4
Die Fensterauflösung hat nichts damit zu tun, ob sich ein Browser auf einem mobilen Gerät befindet oder nicht. Beispielsweise werden viele Desktop-Browser in Nicht-Vollbild-Fenstern ausgeführt. Wenn Sie diesen Browsern eine Benutzeroberfläche für Handheld-Bildschirme präsentieren, werden ihre Benutzer eine frustrierende Erfahrung machen.
21sәɹoɈ
1
@ JohnSlegers - Ich schäme mich meistens, eine Frage zu googeln und meine eigene Antwort auf stackoverflow zu finden. wieder und wieder. Ich selbst bin in einem ständigen Stapelüberlauf
vsync
7

Sobald das Element den Fokus erhält, verwischen Sie es sofort. Der Bootstrap-Datepicker, eine sehr beliebte und gut gewartete Komponente mit fast 10.000 Sternen in GitHub, verwendet diesen Ansatz:

if (window.navigator.maxTouchPoints || 'ontouchstart' in document) {
    this.input.blur();
}

https://github.com/uxsolutions/bootstrap-datepicker

Danke an Tigger für die Unterstützung.

JT Taylor
quelle
7

Eine wirklich gute Möglichkeit, mobile oder Tablet-Geräte zu erkennen, besteht darin, zu prüfen, ob der Browser ein Berührungsereignis erstellen kann.

Einfacher JavaScript-Code:

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

if (isMobile()) {
   # do whatever you wanna do!
}

Das hat bei mir sehr gut funktioniert, aber es kann ein Problem mit Laptops geben, die über ein Touchscreen-Display verfügen.

Ich bin nicht sicher, ob ein Touchscreen-Laptop als mobiles Gerät erkannt wird, da ich ihn noch nicht getestet habe.

Neo Morina
quelle
5
Touchscreen-Laptops werden als mobiles Gerät erkannt. Sowie Touchscreen-Monitore für Desktops. Ob Sie es glauben oder nicht, Sie werden auch auf Probleme stoßen, wenn Sie ein Touchscreen-Gerät verwenden, um RDP in ein anderes Gerät zu übertragen, das keinen Touchscreen hat.
Blissfool
@blissfool Ich denke, dies ist dann nicht der richtige Weg, um mobile Geräte zu erkennen.
Neo Morina
Unglücklicherweise nicht. Für einen sehr begrenzten Anwendungsfall ist dies jedoch möglicherweise immer noch eine praktikable Option.
Blissfool
Schreiben Sie niemals Code, der auf einer Ausnahme basiert, die auf jeden Fall sicher ausgelöst wird ...
Pablo
@Sivic wird nur ausgelöst, wenn kein TouchEvent vorhanden ist und der obige Code es abfängt und false zurückgibt. Dies ist bei Mobilgeräten, Tablets oder anderen Touchscreen-Geräten nicht der Fall.
Neo Morina
5

Hier ist meine überarbeitete Lösung für das Problem. Immer noch nicht perfekt. Die einzig wahre Lösung wäre, wenn die Gerätehersteller die Benutzeragentenzeichenfolgen "Mobile" und "Tablet" ernst nehmen.

window.onload = userAgentDetect;
function userAgentDetect() {
  if(window.navigator.userAgent.match(/Mobile/i)
  || window.navigator.userAgent.match(/iPhone/i)
  || window.navigator.userAgent.match(/iPod/i)
  || window.navigator.userAgent.match(/IEMobile/i)
  || window.navigator.userAgent.match(/Windows Phone/i)
  || window.navigator.userAgent.match(/Android/i)
  || window.navigator.userAgent.match(/BlackBerry/i)
  || window.navigator.userAgent.match(/webOS/i)) {
    document.body.className += ' mobile';
    alert('True - Mobile - ' + navigator.userAgent);
  } else {
    alert('False - Mobile - ' + navigator.userAgent);
  }
  if(window.navigator.userAgent.match(/Tablet/i)
  || window.navigator.userAgent.match(/iPad/i)
  || window.navigator.userAgent.match(/Nexus 7/i)
  || window.navigator.userAgent.match(/Nexus 10/i)
  || window.navigator.userAgent.match(/KFAPWI/i)) {
    document.body.className -= ' mobile';
    document.body.className += ' tablet';
    alert('True - Tablet - ' + navigator.userAgent);
  } else {
    alert('False - Tablet - ' + navigator.userAgent);
  }
}

Was passiert, wenn das Nexus 7-Tablet nur über die Android UA-Zeichenfolge verfügt? Zuerst wird das Mobile wahr, später wird auch das Tablet wahr, aber das Tablet löscht die Mobile UA-Zeichenfolge aus dem Body-Tag.

CSS:

body.tablet { background-color: green; }
body.mobile { background-color: red; }

alertLinien für die Entwicklung hinzugefügt. Die Chrome-Konsole kann viele Handheld-Geräte emulieren. Dort testen.

BEARBEITEN:

Verwenden Sie dies einfach nicht, sondern verwenden Sie stattdessen die Funktionserkennung. Es gibt so viele Geräte und Marken, dass die Ausrichtung auf eine Marke NIEMALS die richtige Lösung ist.

Lanti
quelle
4

Ich rate Ihnen, http://wurfl.io/ zu besuchen.

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

(vorausgesetzt, Sie verwenden natürlich ein Nexus 7) und Sie können Dinge tun wie:

if(WURFL.form_factor == "Tablet"){
    //dostuff();
}

Das ist was Sie suchen.

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

Luca Passani
quelle
1
Und wie kommt es, dass dies Safari auf dem iPhone nicht erkennt?
Amyth
Können Sie erweitern, welchen Browser Sie verwenden (eine genaue UA-Zeichenfolge wäre perfekt), welche Daten Sie erhalten und was Sie erwarten?
Luca Passani
Ich habe auch wurfl ausprobiert, ich bin auf einem iPhone 5C mit IOS 11.2. Safari wird nicht als mobiler Browser erkannt. Ich erwarte, "is_mobile" zu verwenden: true und dann "form_factor": Smartphone und es wird auch nicht zurückgegeben.
Mike Wells
Ich musste mich an die Mobile Data-Gurus in der Firma wenden und sie sagten mir, dass OS 11.2 nicht auf dem 5C läuft. Das niedrigste Gerät ist das 5S. In dem, was du geschrieben hast, stimmt also etwas nicht. Wenden Sie sich offline an ScientiaMobile, um zu überprüfen, wo sich die Trennung möglicherweise befindet. Vielen Dank
Luca Passani
4

Hier ist ein Einzeiler

function isMobile() {
  return (typeof window.orientation !== "undefined") || (navigator.userAgent.indexOf('IEMobile') !== -1);
};
Rick Enciso
quelle
3

Kommt auf den Anwendungsfall an. Alle mobilen Geräte benötigen einen Akku. Wenn Sie nach Rechenleistung suchen, ohne die Batterie zu entladen, verwenden Sie die Batteriestatus-API :

navigator.getBattery().then(battery => {
  battery.charging ? 'charging' : 'not charging';
});

Wenn Sie nach einer Präsentationsverwendung suchen matchMedia, die einen booleschen Wert zurückgibt:

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Oder kombinieren Sie sie für eine noch bessere Benutzererfahrung auf Tablet-Geräten.

Josh Habdas
quelle
Beachten Sie, dass die Batteriestatus-API aus den Browsern entfernt wird.
Sora2455
Die Batteriestatus-API wurde aus Firefox entfernt, ist jedoch seit Juli 2016 eine Empfehlung für W3C-Kandidaten. Sie funktioniert weiterhin in gängigen Browsern und ist hilfreich für die Gestaltung der Benutzererfahrung.
Josh Habdas
2

Hier ist eine ECMAScript 6-Lösung (TypeScript bereit)

public isMobile(): boolean {
  let check = false;
  ((a => {
      if (/(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))) check = true;
      }))(navigator.userAgent || navigator.vendor);
  return check;
 }
0x1ad2
quelle
Warum nicht einfach die ifBedingung zurückgeben, anstatt diese ganze checkVariable zu haben?
Vic
2

Es gibt einen einfachen Trick, um festzustellen, ob es sich um ein mobiles Gerät handelt oder nicht. Überprüfen Sie einfach, ob das Ereignis ontouchstart vorhanden ist:

function isMobile()
{
    return "ontouchstart" in window;
}
Martin Wantke
quelle
3
Funktioniert nicht mit Laptops und Dekstops mit Touchscreen-Monitoren. Auch wird ein Problem mit Hybrid-PCs wie Surface sein. Weniger ein Problem mit Desktops, aber es werden heutzutage mehr Touchscreen-Laptops verkauft.
Blissfool
2

Ich habe einige Szenarien erlebt, in denen die obigen Antworten für mich nicht funktionieren. Also habe ich mir das ausgedacht. Könnte jemandem hilfreich sein.

if(/iPhone|iPad|iPod|Android|webOS|BlackBerry|Windows Phone/i.test(navigator.userAgent)
 || screen.availWidth < 480){
//code for mobile
}

Dies hängt von Ihrem Anwendungsfall ab. Wenn Sie sich auf die Verwendung des Bildschirms konzentrieren screen.availWidth, oder document.body.clientWidthwenn Sie basierend auf dem Dokument rendern möchten.

Thyagarajan C.
quelle
1

Das Beste muss sein:

var isMobile = (/Mobile/i.test(navigator.userAgent));

Aber wie Yoav Barnea sagt ...

// Seem legit
var isMobile = ('DeviceOrientationEvent' in window || 'orientation' in window);
// But with my Chrome on windows, DeviceOrientationEvent == fct()
if (/Windows NT|Macintosh|Mac OS X|Linux/i.test(navigator.userAgent)) isMobile = false;
// My android have "linux" too
if (/Mobile/i.test(navigator.userAgent)) isMobile = true;

Nach diesen 3 Tests hoffe ich, dass var isMobile ... ok ist

Molokoloco
quelle
> Firefox Mobile auf Android scheint keine "Orientierung im Fenster" zu haben
Molokoloco
1
Sorry .. ok für mich funktioniert es jetzt so gut. "if (Modernizr.touch) / * ... * /" und weiter ...
molokoloco
Ich frage mich nur, wie Modernizr.touch auf einem Touchscreen-Desktop-Gerät funktionieren würde.
B2K
Um es eleganter zu machen, sollten Sie den gesamten Code in nur einem if-else if-else if-Block erstellen.
Heitor
1

Hier ist er voll funktionsfähig

function isMobile(){
    return (/(android|bb\d+|meego).+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|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino|android|ipad|playbook|silk/i.test(navigator.userAgent||navigator.vendor||window.opera)||/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||navigator.vendor||window.opera).substr(0,4)))
}

jQuery.noConflict();
jQuery(document).ready(function(){
    if(isMobile()) alert("Mobile"); else alert("Not Mobile");
});
David Latty
quelle
.substr (0,4) gibt die ersten 4 Buchstaben zurück. Wie erkennt es "Android. + Mobile"?
Raacer
1
@raacer Es gibt tatsächlich zwei reguläre Ausdrücke in der Antwort (beide in derselben Zeile) - der erste prüft die gesamte UA-Zeichenfolge und sucht nach Android, Mobile usw., während der zweite nur die ersten 4 Zeichen der UA prüft .
JackW
1
//true / false
function isMobile()
{
   return (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ); 
}

Sie können diesem Tutorial auch folgen, um ein bestimmtes Mobiltelefon zu erkennen. Klicken Sie hier .

Gtzinos
quelle
Bitte fügen Sie MobileIhrem RX
Oriadam
1

Was ist mit "window.screen.width"?

if (window.screen.width < 800) {
// do something
}

oder

if($(window).width() < 800) {
//do something
}

Ich denke, das ist der beste Weg, denn es gibt jeden Tag ein neues mobiles Gerät!

(obwohl ich denke, dass es in alten Browsern nicht so unterstützt wird, aber probieren Sie es aus :))

Ahmad Yousef
quelle
1
Was ist mit Landschaft?
Erick Voodoo
1
Dies ist für bestimmte Szenarien nicht sehr nützlich. Wenn die Größe des Desktop-Browsers geändert wird, wird er möglicherweise fälschlicherweise als mobiler Browser
erkannt
Ein PC unterscheidet sich wesentlich von mobilen Geräten in Bezug auf Benutzerfreundlichkeit, schreckliche Antwort!
Heitor
1

Beachten Sie, dass die meisten Mobilgeräte der neueren Generation jetzt Auflösungen von mehr als 600 x 400 haben. dh ein iPhone 6 ....

Testnachweis: Die aktuellsten und aktuellsten Beiträge wurden hier ausgeführt. Eine optionale Prüfung wurde einmal wie folgt ausgeführt:

(function(a){
    window.isMobile = (/(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)))
})(navigator.userAgent||navigator.vendor||window.opera);

alert("This browser was found to be a % browser.", window.isMobile ? 'mobile' : 'desktop');

Irgendwie wurden die folgenden Ergebnisse in den folgenden Browser-Apps zurückgegeben. Technische Daten: iPhone 6S, iOS 10.3.1.

Safari (aktuell): Als Handy erkannt.

Chrome (aktuell): Es wurde nicht als Mobiltelefon erkannt.

Also habe ich dann den Vorschlag von Lanti ( https://stackoverflow.com/a/31864119/7183483 ) getestet und er lieferte die richtigen Ergebnisse (mobil für alle iOS-Geräte und Desktop für meinen Mac). Daher habe ich es ein wenig bearbeitet, da es zweimal ausgelöst wurde (sowohl für Handys als auch für Tablets). Beim Testen auf einem iPad fiel mir dann auf, dass es auch als Handy zurückkehrte, was sinnvoll ist, da die Parameter das Lantiverwendet überprüfen Sie das Betriebssystem mehr als alles andere. Aus diesem Grund habe ich einfach die Tablet-IF-Anweisung in den Mobile-Check verschoben, wodurch Mobile zurückgegeben wird, wenn der Tablet-Check negativ war, und das Tablet ansonsten. Ich habe dann die else-Klausel hinzugefügt, damit die mobile Prüfung als Desktop / Laptop zurückgegeben wird, da beide qualifiziert sind, aber dann festgestellt habe, dass der Browser die Marke CPU und OS erkennt. Also habe ich hinzugefügt, was dort als Teil der else if-Anweisung zurückgegeben wird. Um dies zu begrenzen, habe ich eine Warnhinweis hinzugefügt, falls nichts festgestellt wurde. Siehe unten, wird bald mit einem Test auf einem Windows 10-PC aktualisiert.

Oh, und ich habe auch eine 'debugMode'-Variable hinzugefügt, um einfach zwischen Debug und normalem Kompilieren zu wechseln.

Haftungsausschluss: Volle Anerkennung für Lanti , auch, dass dies nicht auf Windows-Tablets getestet wurde ... die möglicherweise Desktop / Laptop zurückgeben, da das Betriebssystem reines Windows ist. Werde nachsehen, wenn ich einen Freund finde, der einen benutzt.

function userAgentDetect() {
    let debugMode = true;
    if(window.navigator.userAgent.match(/Mobile/i)
        || window.navigator.userAgent.match(/iPhone/i)
        || window.navigator.userAgent.match(/iPod/i)
        || window.navigator.userAgent.match(/IEMobile/i)
        || window.navigator.userAgent.match(/Windows Phone/i)
        || window.navigator.userAgent.match(/Android/i)
        || window.navigator.userAgent.match(/BlackBerry/i)
        || window.navigator.userAgent.match(/webOS/i)) {
        if (window.navigator.userAgent.match(/Tablet/i)
            || window.navigator.userAgent.match(/iPad/i)
            || window.navigator.userAgent.match(/Nexus 7/i)
            || window.navigator.userAgent.match(/Nexus 10/i)
            || window.navigator.userAgent.match(/KFAPWI/i)) {
            window.deviceTypeVar = 'tablet';
            if (debugMode === true) {
                alert('Device is a tablet - ' + navigator.userAgent);
            }
        } else {
            if (debugMode === true) {
                alert('Device is a smartphone - ' + navigator.userAgent);
            };
            window.deviceTypeVar = 'smartphone';
        }
    } else if (window.navigator.userAgent.match(/Intel Mac/i)) {
        if (debugMode === true) {
            alert('Device is a desktop or laptop- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'desktop_or_laptop';
    } else if (window.navigator.userAgent.match(/Nexus 7/i)
        || window.navigator.userAgent.match(/Nexus 10/i)
        || window.navigator.userAgent.match(/KFAPWI/i)) {
        window.deviceTypeVar = 'tablet';
        if (debugMode === true) {
            alert('Device is a tablet - ' + navigator.userAgent);
        }
    } else {
        if (debugMode === true) {
            alert('Device is unknown- ' + navigator.userAgent);
        }
        window.deviceTypeVar = 'Unknown';
    }
}
jlmurph
quelle
1

Dies ist nur ein es6-Port der akzeptierten Antwort , die ich in meinem Projekt verwende. Beachten Sie, dass dies auch Tablets umfasst.

export const isMobile = () => {
  const vendor = 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|xda|xiino|android|ipad|playbook|silk/i.test(
      vendor
    ) ||
    /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(
      vendor.substr(0, 4)
    )
  );
};
Und ich
quelle
1

return 'ontouchstart' in window && window.screen.availWidth < 768

Wie wäre es damit, es erweitert die Antwort oben, überprüft aber auch die Bildschirmgröße

Dave Keane
quelle
1

Verwenden von Regex (von detectmobilebrowsers.com ):

/* eslint-disable */
export const IS_MOBILE = (function (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)
      )
  )
  // @ts-ignore
})(navigator.userAgent || navigator.vendor || window.opera)
/* eslint-enable */
Илья Зеленько
quelle
0

Dies könnte auch eine Lösung sein.

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;

  console.log('Mobile device:'+isMobile);

  var doc_h = $(document).height(); // returns height of HTML document
  var doc_w = $(document).width(); // returns width of HTML document
  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  var iPadVertical = window.matchMedia("(width: 768px) and (height: 1024px) and (orientation: portrait)");
  var iPadHoricontal = window.matchMedia("(width: 1024px) and (height: 767px) and (orientation: landscape)");

  console.log('Height: '+doc_h);
  console.log('width: '+doc_w);

  if (iPadVertical.matches) {
      console.log('Ipad vertical detected');
  }else if (iPadHoricontal.matches){
      console.log('Ipad horicontal detected');
  }else {
      console.log('No Ipad');
  }

Wenn Sie beide Methoden verwenden, erhalten Sie eine perfekte Möglichkeit, verschiedene Geräte zu erkennen.

Friis1978
quelle