Определяем тип устройства, на котором открыта веб страница сайта

При разработке веб приложения необходимо учитывать принципиальные различия принципов управления элементами интерфейса на разных типах устройств. Существует большое количество устройств, которые пользователи могут использовать для просмотра веб сайтов и приложений.

Все устройства можно разделить на десктопные и мобильные.

Десктопные устройства подразумевают управление элементами интерфейса при помощи мыши и клавиатуры.

Мобильные устройства предполагают управление интерфейсом при помощи сенсорного экрана. Основное отличие заключается в том, что нет курсора, а соответственно отсутствует hover эффект.

Например, интерфейс приложения предполагает выпадающее меню при наведении курсора на элемент пункта меню. Это достаточно легко сделать с помощью псевдокласса hower.

Мобильные устройства не предполагают наличие курсора как элемента управления, соответственно и рассчитывать на псевдокласс hover не приходится. При отображении этого же приложения на мобильном устройстве помимо изменения размеров и расположения элементов на веб странице при помощи медиа запросов CSS необходимо предусмотреть работу выпадающего меню по клику.

Ко всему выше сказанному добавим то, что рекомендуется применять эффект hover только для десктопных устройств и приходим в тому, что нам необходимо определять тип устройства, на котором в текущий момент времени открыто приложения.

Важно понимать, что задействовать куски css кода только на определенных устройствах, а именно для этого необходимо определять устройство, можно и другими способами. Например, с помощью медиазапросов.

Один из способов определить устройство — это применить JS скрипт.

const isMobile = {

  Android: function() {return navigator.userAgent.match(/Android/i);},

  BlackBerry: function() {return navigator.userAgent.match(/BlackBerry/i);},

  iOS: function() {return navigator.userAgent.match(/iPhone|iPad|iPod/i);},

  Opera: function() {return navigator.userAgent.match(/Opera Mini/i);},

  Windows: function() {return navigator.userAgent.match(/IEMobile/i);},

  any: function() {

    return (

      isMobile.Android() ||

      isMobile.BlackBerry() ||

      isMobile.iOS() ||

      isMobile.Opera() ||

      isMobile.Windows());

  }

};

Теперь этот скрипт необходимо как-то использовать. Для этого можно тегу body давать класс _pc при открытии на десктопном устройстве и _pauth при открытии на мобильном устройстве.

Ниже добавляем код, который будет добавлять нужный класс тегу body:

if (isMobile.any()) {

  document.body.classList.add('_taudh');

} else {

  document.body.classList.add('_pc');

}

Использование

Приведу пример использования скрипта для того, чтоб ограничить использование псевдокласса hover только на десктопных устройствах.

Допустим нам необходимо создать у кнопки эффект при наведении. То есть обратится к bottom:hover со стилями эффекта только если приложение открыто на десктопном устройстве. Воспользуемся тем, что у тега body присутствует класс _pc и обратимся к элементу в CSS через этот класс: ._pc buttom::hover { /* Код эффекта */}