Überprüfen Sie, ob es Tablet oder Desktop ist

Question

Hallo Ich habe folgen Code:

angular.module("myApp", []).controller("myController", function($scope) { 
 
    $scope.isShown = false; 
 

 
    $scope.togglePopup = function() { 
 
    $scope.isShown = !$scope.isShown; 
 
    } 
 
});

.wrapper { 
 
    display: flex; 
 
    flex-direction: column; 
 
    width: 100%; 
 
    background-color: grey; 
 
} 
 
.inputAddon { 
 
    display: flex; 
 
    flex-direction: row; 
 
} 
 
input { 
 
    width: 75px; 
 
    height: 19px; 
 
} 
 
.addon { 
 
    width: 25px; 
 
    height: 25px; 
 
    background-color: green; 
 
} 
 
.popup { 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 1px solid red; 
 
    background-color: white; 
 
    position: absolute; 
 
    z-index: 1000; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 

 
<div ng-app="myApp" ng-controller="myController" class="wrapper"> 
 
    <div class="inputAddon"> 
 
    <input type="number"> 
 
    <div class="addon" ng-click="togglePopup()"></div> 
 
    </div> 
 
    <div class="popup" ng-if="isShown"></div> 
 
</div>

Es Sie einen Eingang mit einem Add-on-Taste auf der rechten Seite sehen können, welche Öffnung so etwas wie ein Popup mit mehr Aktionen drin. Nun sollte es so funktionieren:

• Desktop: Klicken Sie im Eingabefeld = Fokus in Eingabefeld und geben Wert mit Tastatur. Klick auf Addon-Button (grün) = öffnet das Popup.
• Tablet: Addon-Taste (grün) ausgeblendet. Click in input = öffne nicht die Kostümtastatur des Browsers (zum Beispiel die virtuelle Tastatur in Safari von ipad). Es öffnet das Popup wie der Addon-Button (grün) auf dem Desktop.

Also ich brauche eine Möglichkeit zu erkennen, ob es ein Tablet oder einen Desktop gibt. Wenn es ein Tablet ist, musste ich die Eigenschaft readonly="true" dem Eingang hinzufügen. Dies würde die Kostümtastatur auf einem Tablet nicht öffnen. Außerdem muss der Addon-Button ausgeblendet und das Popup geöffnet werden, wenn ich in die Eingabe klicke. Auf dem Desktop sollte es wie im Snippet funktionieren.

Ich weiß, wie readonly hinzufügen/entfernen und wie Adddon-Schaltfläche mit Jquery, Javascrpt etc. ausblenden/anzeigen Aber was ist der beste Weg zu erkennen, ob es Tablet oder Desktop? Ich habe ein paar Fragen mit $.browse gefunden, aber ich habe gelesen, dass es nicht mehr in Jquery 1.9.1 unterstützt wird? Oder gibt es auch eine Möglichkeit, dies mit eckigen zu tun?

Irgendwelche Ideen/Informationen dazu?

Danke.

Answer 1

Sie können UAParser.js verwenden: https://faisalman.github.io/ua-parser-js/

var parser = new UAParser(); 
var result = parser.getResult(); 
//Possible 'device.type': 
//console, mobile, tablet, smarttv, wearable, embedded 
console.log(result.device.type); 

Weitere Dokumentation Info: https://github.com/faisalman/ua-parser-js