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

0

Привет, у меня есть код:

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>

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

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

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

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

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

Благодарю.

  • 1
    почему бы не увидеть этот пост. stackoverflow.com/questions/16520186/...
Показать ещё 4 комментария

1 ответ

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

  • 0
    Спасибо всем вам, я воспользуюсь одним из них. ура

Ещё вопросы

Сообщество Overcoder
Наверх
Меню