JS определяет мобильное устройство

Привет всем! Я думаю, что это что-то вроде моего Hello world of writing posts, так что не будьте слишком суровы 😄.

Отказ от ответственности

Я не утверждаю, что это лучший способ; я бы не назвал его самым полным способом проверить, является ли устройство «популярным» мобильным устройством. Но он прост и по большей части должен работать правильно. (Если вы увидите/найдете проблему, пожалуйста, дайте мне знать) И последнее, но не менее важное: я не придумал этот способ. Я нашел его и поделюсь ссылкой здесь, если и когда я снова найду этот пост.

Введение

Во-первых, если вы хотите применить стили к чему-либо в зависимости от фактических размеров экрана. (мое мнение) используйте встроенные медиа-запросы CSS, очень надежные, как только вы их поймете.

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

Теперь, когда я рассказал об этом, вот решение и небольшое объяснение после него.

var agentDetails = navigator.userAgent;

function isMobile() {
  if(/Android|Mobi|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(agentDetails) ) {
    // Hit here if the device is a "popular-ish" mobile device
  } else {
    // Hit here if the device is  NOT a "popular-ish" mobile device
  }
}

Объяснение

Итак, давайте начнем разбирать это…

Первая строка var agentDetails = navigator.userAgent получает данные агента пользователя для используемого браузера.

Вкратце, это получение платформы, безопасности, ОС или процессора, локализации, номера версии ревизии, относящейся к текущему устройству. (на момент написания статьи)
Это будет содержать информацию, которую мы хотим увидеть, и будет белым текстом в Codepen ниже.

Второй важной частью является оператор if(). Строка в if() имеет / в начале и /i в конце (/i в конце просто делает ее нечувствительной к регистру) & разделена трубами («|»).
Это создает регулярное выражение строки. (Это может быть целая другая серия 😅).

Причина, по которой мы делаем это регулярное выражение, заключается в том, что мы можем использовать метод .test(), который «выполняет поиск соответствия между регулярным выражением и указанной строкой». Вы можете прочитать об этом здесь

Итак, если данные агента пользователя возвращают, например:
«Mozilla/5.0 (iPad; CPU OS 15 5, как Mac OS X) AppleWebKit/605.1.15 (KHTML, как Gecko) Mobile/15E148».

Это будет iPad, поэтому он вернет true, так как проверяемая строка (агент пользователя) & регулярное выражение оба содержат слово iPad.

Заключение

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