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

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

userAgent

userAgent - свойство объекта navigator. userAgent содержит информацию, которую браузер передает в HTTP-заголовках.

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

1. tablet - планшет,
2. mobile - мобильный телефон или смартфон,
3. все остальные случае будут отнесены к настольных компьютерам и ноутбукам.

Кроме типа устройства таким образом можно получить и другую информацию, например: ширину экрана пользовательского устройства.

А теперь перейдем к JS-скрипту, реализующему нужную нам функцию:

const getDeviceType = () => {
  const ua = navigator.userAgent,
    types = [
      {
        type: "tablet",
        value: /(tablet|ipad|playbook|silk)|(android(?!.*mobi))/i.test(ua)
      },
      {
        type: "mobile",
        value: /Mobile|iP(hone|od|ad)|Android|BlackBerry|IEMobile|Kindle|Silk-Accelerated|(hpw|web)OS|Opera M(obi|ini)/.test(
          ua
        )
      }
    ];
  try {
    return types.filter(type => type.value)[0].type;
  } catch (error) {
    return "desktop";
  }
};

Следует заметить, что userAgent не всегда содержит данные о реальном пользовательском устройстве. Эту информацию довольно легко подменить. Например, для ботов параметры пользовательского устройства практически всегда являются ложными.

Спасибо за внимание.