it-swarm.com.de

Wie erkennt man ein mobiles Gerät mit JavaScript?

Ich wurde gebeten, eine tatsächliche HTML-Seite/JavaScript zu erstellen, um die Erkennung der mobilen Geräte (iPhone/iPad/Android) mithilfe von JavaScript-Code zu simulieren. Der Benutzer wird dann zu einem anderen Bildschirm geleitet, in dem er nach seiner E-Mail-Adresse gefragt wird.

70
Jeevs

Ich weiß, dass diese Antwort 3 Jahre zu spät kommt, aber keine der anderen Antworten sind in der Tat zu 100% korrekt. Wenn Sie feststellen möchten, ob sich der Benutzer in irgendeiner Form auf einem mobilen Gerät befindet (Android, iOS, BlackBerry, Windows Phone, Kindle usw.), können Sie den folgenden Code verwenden:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent)) {
    // Take the user to a different screen here.
}
70
Baraa

Sie würden die Benutzeragentenzeichenfolge des anfragenden Browsers erkennen und dann basierend darauf entscheiden, ob es sich um einen mobilen Browser handelt oder nicht. Dieses Gerät ist nicht perfekt und wird niemals darauf zurückzuführen sein, dass Benutzeragenten nicht für mobile Geräte standardisiert sind (zumindest nicht meines Wissens nach).

Diese Seite hilft Ihnen beim Erstellen des Codes: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

Beispiel:

Sie können den Benutzeragenten in Javascript folgendermaßen erhalten:

var uagent = navigator.userAgent.toLowerCase();

Und dann machen Sie den Check im selben Format wie dieses (verwenden Sie einfach das iPhone als schnelles Beispiel, aber andere müssten ein wenig anders sein)

function DetectIphone()
{
   if (uagent.search("iphone") > -1)
      alert('true');
   else
      alert('false');
}

Bearbeiten

Sie würden so eine einfache HTML-Seite erstellen:

<html>
    <head>
        <title>Mobile Detection</title>
    </head>
    <body>
        <input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
    </body>
</html>
<script>
    function DetectIphone()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }
</script>
27
slandau

Eine ziemlich einfache Lösung ist die Überprüfung der Bildschirmbreite. Da fast alle mobilen Geräte (derzeit) eine maximale Bildschirmbreite von 480px haben, ist es ziemlich zuverlässig:

if( screen.width <= 480 ) {
    location.href = '/mobile.html';
}

Die Benutzer-Agent-Zeichenfolge ist auch ein Ort zum Suchen. Die erste Lösung ist jedoch immer noch besser, da die Bildschirmbreite nicht lügt, auch wenn ein freaking-Gerät nicht korrekt auf den Benutzeragenten reagiert.

Die einzige Ausnahme sind hier Tablet-PCs wie das iPad. Diese Geräte haben eine höhere Bildschirmbreite als Smartphones, und ich würde wahrscheinlich mit der User-Agent-Zeichenfolge gehen.

20
jAndy
if(navigator.userAgent.match(/iPad/i)){
 //code for iPad here 
}

if(navigator.userAgent.match(/iPhone/i)){
 //code for iPhone here 
}


if(navigator.userAgent.match(/Android/i)){
 //code for Android here 
}



if(navigator.userAgent.match(/BlackBerry/i)){
 //code for BlackBerry here 
}


if(navigator.userAgent.match(/webOS/i)){
 //code for webOS here 
}
12
var isMobileDevice = navigator.userAgent.match(/iPad|iPhone|iPod/i) != null 
    || screen.width <= 480;
8
kolypto

Eine einfache Lösung könnte nur css sein. Sie können Stile in Ihrem Stylesheet festlegen und dann am unteren Rand anpassen. Moderne Smartphones verhalten sich wie eine Breite von nur 480 Pixeln, während sie weitaus mehr sind. Der Code zum Erkennen eines kleineren Bildschirms in CSS ist

@media handheld, only screen and (max-width: 560px), only screen and (max-device-width: 480px)  {
    #hoofdcollumn {margin: 10px 5%; width:90%}
}

Hoffe das hilft!

6
Ivotje50

Wenn Sie jetzt auf diese Frage gestoßen sind, sollten Sie wahrscheinlich window.matchMedia verwenden (und, falls es noch 2015 ist, polyfilling für ältere Browser):

if (matchMedia('handheld').matches) {
    //...
} else {
    //...
}
5
Chris Devereux

Also habe ich das gemacht. Danke euch allen!

<head>
<script type="text/javascript">
    function DetectTheThing()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1 || uagent.search("ipad") > -1 
       || uagent.search("Android") > -1 || uagent.search("blackberry") > -1
       || uagent.search("webos") > -1)
          window.location.href ="otherindex.html";
    }
</script>

</head>

<body onload="DetectTheThing()">
VIEW NORMAL SITE
</body>

</html>
4
CSepúlveda

Ich benutze mobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent)

4
individuo7

Sie können die Benutzeragentenzeichenfolge verwenden, um dies zu erkennen.

var useragent = navigator.userAgent.toLowerCase();

if( useragent.search("iphone") )
    ; // iphone
else if( useragent.search("iPod") )
    ; // iPod
else if( useragent.search("Android") )
    ; // Android
etc

Eine Liste der Useragent-Zeichenfolgen finden Sie hier http://www.useragentstring.com/pages/useragentstring.php

3
tskuzzy

Ich empfehle Ihnen einen Blick auf http://wurfl.io/

Kurz gesagt, wenn Sie eine kleine JS-Datei importieren:

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

ihnen bleibt ein JSON-Objekt, das wie folgt aussieht:

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

(Das setzt natürlich voraus, dass Sie ein Nexus 7 verwenden) und Sie können beispielsweise

WURFL.complete_device_name

Das ist was Sie suchen.

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

3
Luca Passani

In diesem Beispiel wird überprüft, ob eine Webseite in Desktop oder in der mobilen App geladen ist.

JS wird beim Laden der Seite ausgeführt und Sie können Desktop-spezifische Dinge beim Laden der Seite ausführen, z.

   <!DOCTYPE html>
    <html>
    <head>
     <script type="text/javascript">

            /*
            * Hide Scan button if Page is loaded in Desktop Browser
            */
            function hideScanButtonForDesktop() {

                if (!(/Android|webOS|iPhone|iPad|iPod|BlackBerry|BB|PlayBook|IEMobile|Windows Phone|Kindle|Silk|Opera Mini/i.test(navigator.userAgent))) {

                    // Hide scan button for Desktop
                    document.getElementById('btnLinkModelScan').style.display = "none";
                }         
            }

            //toggle scanButton for Desktop on page load
            window.onload = hideScanButtonForDesktop;
        </script>
    </head>
2
Hitesh Sahu

Bestimmen Sie, was der Benutzeragent für die Geräte ist, die Sie simulieren müssen, und testen Sie eine Variable danach.

zum Beispiel:

// var userAgent = navigator.userAgent.toLowerCase(); // this would actually get the user agent

var userAgent = "iphone"; /* Simulates User Agent for iPhone */
if (userAgent.indexOf('iphone') != -1) {
   // some code here
}
1
Inversus

Verwenden Sie einfach DeviceDetection

deviceDetection.deviceType // phone | tablet according to device
0
Manjesh V

Da ich (irgendwie erfolglos) nach der richtigen Lösung für meinen Hack gesucht habe, möchte ich meinen Hack trotzdem hier hinzufügen: Ich überprüfe lediglich die Unterstützung der Geräteorientierung, was den größten Unterschied zwischen Handys und Desktop darstellt:

var is_handheld = 0; // Nur ein globaler if (window.DeviceOrientationEvent) {is_handheld = 1;}

Abgesehen davon sollte imho eine Seite auch eine manuelle Auswahl zwischen Mobile/Desktop-Layout bieten. Ich habe 1920 * 1080 und ich kann hineinzoomen - ein zu stark vereinfachter und funktionsreduzierter Wordpressoid-Block ist nicht immer eine gute Sache. Ein Layout, das auf der Erkennung von nicht funktionierenden Geräten basiert, erzwingt die ganze Zeit.

0
dd_1138

Eine andere Möglichkeit ist die Verwendung von mobile-detect.js . Probieren Sie die Demo aus.

Browserverwendung:

<script src="mobile-detect.js"></script>
<script>
    var md = new MobileDetect(window.navigator.userAgent);
    // ... see below
</script>

Node.js/Express:

var MobileDetect = require('mobile-detect'),
    md = new MobileDetect(req.headers['user-agent']);
// ... see below

Beispiel:

var md = new MobileDetect(
    'Mozilla/5.0 (Linux; U; Android 4.0.3; en-in; SonyEricssonMT11i' +
    ' Build/4.1.A.0.562) AppleWebKit/534.30 (KHTML, like Gecko)' +
    ' Version/4.0 Mobile Safari/534.30');

// more typically we would instantiate with 'window.navigator.userAgent'
// as user-agent; this string literal is only for better understanding

console.log( md.mobile() );          // 'Sony'
console.log( md.phone() );           // 'Sony'
console.log( md.tablet() );          // null
console.log( md.userAgent() );       // 'Safari'
console.log( md.os() );              // 'AndroidOS'
console.log( md.is('iPhone') );      // false
console.log( md.is('bot') );         // false
console.log( md.version('Webkit') );         // 534.3
console.log( md.versionStr('Build') );       // '4.1.A.0.562'
console.log( md.match('PlayStation|xbox') ); // false
0
BuZZ-dEE

Dies ist meine Version, die der oberen ziemlich ähnlich ist, aber ich denke gut als Referenz.

if (mob_url == "") {
  lt_url = desk_url;
} else if ((useragent.indexOf("iPhone") != -1 || useragent.indexOf("Android") != -1 || useragent.indexOf("Blackberry") != -1 || useragent.indexOf("Mobile") != -1) && useragent.indexOf("iPad") == -1 && mob_url != "") {
  lt_url = mob_url;
} else {
  lt_url = desk_url;
}
0
Parker LAU

Die Geräteerkennung basierend auf dem Benutzeragenten ist keine sehr gute Lösung. Besser ist es, Funktionen wie das Touchgerät zu erkennen (in jQuery wird $.browser entfernt und stattdessen $.support verwendet).

Um Mobile zu erkennen, können Sie nach Touch-Ereignissen suchen:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Entnahme aus Wie kann ich ein Touchscreen-Gerät mithilfe von JavaScript am besten erkennen?

0
jcubic

Ähnlich wie bei einigen der obigen Antworten. Diese einfache Funktion funktioniert bei mir sehr gut. Es ist aktuell ab 2019

function IsMobileCard()
{
var 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;   
}
0
Debbie Kurth

Das Testen auf Benutzeragenten ist komplex, unübersichtlich und schlägt ausnahmslos fehl. Ich habe auch nicht festgestellt, dass die Medienübereinstimmung für "Handheld" für mich funktioniert. Die einfachste Lösung bestand darin, festzustellen, ob die Maus verfügbar war. Und das geht so:

var result = window.matchMedia("(any-pointer:coarse)").matches;

Hier erfahren Sie, ob Sie schwebende Objekte anzeigen müssen oder nicht, und alles andere, das einen physischen Zeiger erfordert. Die Dimensionierung kann dann für weitere Medienabfragen basierend auf der Breite erfolgen.

Bei der folgenden kleinen Bibliothek handelt es sich um eine Version der obigen Abfrage, die die meisten Szenarien abdecken sollte, in denen es sich um ein Tablet oder ein Telefon ohne Maus handelt.

https://patrickhlauke.github.io/touch/touchscreen-detection/

Medienspiele werden seit 2015 unterstützt und Sie können die Kompatibilität hier überprüfen: https://caniuse.com/#search=matchMedia

Kurz gesagt, Sie sollten Variablen pflegen, die sich darauf beziehen, ob der Bildschirm ein Touchscreen ist und welche Größe der Bildschirm hat. Theoretisch könnte ich einen winzigen Bildschirm auf einem mausgesteuerten Desktop haben.

0
PeterS