webentwicklung-frage-antwort-db.com.de

So können Sie feststellen, ob das Gerät über einen Desktop und/oder ein Mobiltelefon verfügt und ob eine Verbindung über AngularJS besteht oder nicht

Ich habe einige Nachforschungen zu SO durchgeführt, aber die ähnlichen Fragen und Antworten beziehen sich darauf, ob eine Verbindung besteht oder nicht, aber nicht über den Verbindungstyp.

Der Zweck meiner Website besteht darin, dass ein Benutzer, wenn er über ein Mobiltelefon (Telefon oder Tablet) und über WLAN verfügt, einen Videoclip abspielt; Wenn ein Benutzer mobil ist und kein WLAN hat, spielen Sie einen Videoclip ab. Wenn ein Benutzer nicht mobil ist, spielen Sie den Videoclip ab.

Der Grund für das unterschiedliche Verhalten besteht darin, mögliche Aufschläge für den Benutzer aufgrund der relativ großen Größe des Videoclips zu vermeiden. Das hat nichts mit der Geschwindigkeit zu tun - heutzutage ist der Geschwindigkeitsunterschied von LTE v.s. WiFi vielleicht nur wenig; Es ist mehr für das Anliegen der Benutzer, dass die Datenbenutzung ohne WLAN-Verbindung in Rechnung gestellt wird.

Meine Frage ist also, mit AngularJS (<2.0) 1) Wie erkennt man, ob das Gerät Desktop oder Mobile ist? 2) Wie erkennt man, ob das Gerät mit WLAN verbunden ist oder nicht?

(Ich denke, für Q1 ist der Fallback die Verwendung von Bootstrap @media, aber es ist nicht ideal.)

4
jamesdeath123

Sie brauchen Angular nicht, um eine solche Überprüfung durchzuführen. 

Um herauszufinden, ob es sich bei einem Gerät um einen Desktop oder ein Mobiltelefon handelt, verwenden Sie navigator.userAgent. Siehe answer .

Um den Verbindungstyp zu erkennen, verwenden Sie navigator.connection. Siehe answer .
Seien Sie vorsichtig , diese API-Unterstützung ist nicht universell, siehe hier .
Eine andere Möglichkeit besteht darin, dieses plugin auszuprobieren, das auf die Internet-Geschwindigkeitsüberprüfung angewiesen ist, aber ich habe es noch nie verwendet.
Schließlich, wenn Sie WIRKLICH diese Informationen für Smartphone-Benutzer benötigen, Ihre Website auf Cordova konvertieren und dann Ihre App verteilen.

6
Jacques Cornat

Um herauszufinden, welches Gerät verwendet wird, kann dieses angular-Plugin einige Kopfschmerzen ersparen: ngx-device-detector

installieren Sie es: $ npm install ngx-device-detector --save, fügen Sie dem Konstruktor hinzu. Rufen Sie dann beispielsweise this.deviceService.IsMobile() auf, um zu prüfen, ob der Gerätetyp mobil ist. Es gibt andere Methoden, um zu überprüfen, ob das Gerät ein Tablet oder Desktop ist, und andere Methoden, die nützliche Informationen über den Browser zurückgeben.

1
JustLearning

ich ermutige die Entwickler, die Feature-Erkennung zu verwenden, nicht die Browser- oder Desktop-/Mobile-Erkennung. Modernizr verfügt beispielsweise über eine Feature-Erkennung für Verbindungen mit geringer Bandbreite, die jedoch nicht in allen Browsern funktioniert: https://modernizr.com/download#lowbandwidth-setclasses&q=connect

wie es heißt, besteht die Gefahr, dass unbekannte Geräte als schnell angenommen werden.

um ein Gefühl für Desktop vs Mobile zu bekommen, gibt es eine Technik zum Abhören von Touch-Events. cf.: Wie kann ein Touchscreen-Gerät mithilfe von JavaScript am besten erkannt werden?

wenn Sie einen Videoclip automatisch abspielen, sollte dies ein HTML5-Player sein. Aus den von Ihnen genannten Gründen wird er ohnehin nicht automatisch abgespielt, es sei denn, er ist an ein Berührungsereignis gebunden (z. B. "Schlagen").

ich habe dies umgangen, indem ich ein Berührungsereignis von früher "abspeichere", beispielsweise mit dem Videoplayer auf den Bildschirm komme und dieses Ereignis dann für die automatische Wiedergabe wiederverwende. Bitte beachten Sie, ob das automatische Abspielen wirklich das ist, was Sie möchten, da viele Benutzer es als störend empfinden.

0
zim