Так-с, уважаемые коллеги, всех радостно приветствую! Это небольшая статейка как раз для тех людей, которые хотят по быстрому вот такой функционал: обнаруживать какой тип взаимодействия с веб приложением у пользователя: touchscreen, мышка, либо же и то, и другое одновременно обнаруживать какая ориентация на данный момент у пользователя обнаруживать какой тип устройства имеет пользователь: desktop, tab, phone Звучит, конечно, не сложно, но для этого нужно собирать своего трансформера с разных форумов, я же предлагаю свое решение в готовом и компактном виде :) В общем и целом, мне нужен был такой функционал, который бы при первом заходе пользователя показывает touch это или нет. А далее уже можно подхватить и разные другие события. Делается это все для реактивной адаптивности, т.к. на css сделать это просто невозможно.  Перейдем к коду. Создадим для начала все нужные перечисления (enum) для дальнейшего взаимодействия: InteractionType.ts - enum, отвечающий за тип взаимодействия - мышка, тач, либо оба сразу OrientationType.ts - enum, отвечающий за тип ориентации - вертикаль, горизонталь, в рамках css это портрет и лэндскейп DeviceType.ts - enum, отвечающий за тип устройства - планшет, телефон, либо ПК Теперь напишем сам класс, который будем подключать к компонентам. Начнем с самого простого - инициализация и объявление всех полей. Тут все по стандарту, ничего такого, разве что можно обратить внимание на параметр у addEventListener - once, т.к. нам не требуется отслеживать каждый раз что там у пользователя за тип, сработало раз - все, делаем отметку, что есть, например, тачскрин и больше этот обработчик не трогаем. ВАЖНО!! - переменные должны быть реактивные, иначе у вас ничего не будет работать, можно использовать ref из vue, можно использовать Subject'ы из rxjs, но я советую в рамках vue использовать ref, т.к. vue умный и умеет удалять все ссылки, прослушки автоматически, а в rxjs же subscrib'ы очень непослушные и пока вы вручную не напишете unsubscribe, оно так и будет висеть. Также не забудем про инкапсуляцию и сделаем все переменные приватными, поэтому сделаем для них геттеры. Далее, в моем случае, мне нужно было отследить не только при первом действии, но и при заходе на сайт, поэтому я добавил такую функцию для первоначального определения тачскрина: Теперь добавим функции обработчики для eventListener'ов: Думаю, объяснять много тут не надо - просто предусмотрел тут все случаи, когда пользователь с новороченным ноутбуком с тачпадом может кликнуть сначала мышкой, а потом перейти на тачпад. Также и обратно - начал с тачпада, перешел на мышь, в итоге оба взаимодействия. Теперь функция для ориентации устройства: Единственное, что тут нужно знать, так это то, что navigator.userAgent возвращает строку вида: А дальше мы уже можем проводить столько проверок, сколько захотим.Ну и осталась функция для определения ориентации устройства: На этом код готов) Вообще тут можно много всего сделать, нужно уже самому тыкаться и смотреть, что да как прикручивать. Я его использовал примерно так: Все это дело я прикручивал к динамическим классам, от значения computed теперь меняются и стили) Класс!Полный код как обычно на моем гитхабеНа этом желаю всем удачи! До встречи!  Frontend developer (VueJS, Typescript)