Проверьте это планшет или настольный

Question

Привет У меня есть код последующие:

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>

Там вы можете увидеть вход с аддон кнопки на правой стороне, которая открывающего что-то вроде всплывающего окна с большим количеством действий в нем. Теперь он должен работать так:

• Desktop: Нажмите в поле ввода = фокус в поле ввода и значения типа с клавиатуры. Нажмите кнопку addon (зеленый) = открывает всплывающее окно.
• Tablet: Addon-button (green one) hidden. Нажмите на вход = не открывайте клавиатуру костюма браузера (например, виртуальную клавиатуру в сафари из ipad). Он открывает всплывающее окно, как кнопка-аддон (зеленый) на рабочем столе.

Так что мне нужен способ обнаружения, если есть планшет или рабочий стол. Когда это таблетка, мне пришлось добавить свойство readonly="true" на вход. Это не откроет клавиатуру костюма на планшете. Также необходимо скрыть кнопку addon и открыть всплывающее окно, когда я нажимаю на вкладке. На рабочем столе он должен работать как в фрагменте.

Я знаю, как добавить/удалить readonly и как скрыть/показать adddon-кнопку с JQuery, Javascrpt и т. Д. Но что лучше всего определить, если это планшет или рабочий стол? Я нашел несколько вопросов с $.browse, но я читал, что он больше не поддерживается sinse Jquery 1.9.1? Или есть ли способ сделать это с угловым?

Любые идеи/информацию об этом?

Спасибо.

Answer 1

Вы можете использовать UAParser.js: 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); 

Подробнее документации: https://github.com/faisalman/ua-parser-js