Как обнаружить мобильные браузеры с помощью JavaScript

Мобильное обнаружение всегда было важным аспектом разработки приложений. Это актуально как для приложений, так и для программного обеспечения и веб-сайтов. Существует множество причин для проверки агентов мобильного браузера. Самое главное, возможность рендерить уникальный пользовательский опыт.

Одна только библиотека UAParser.js еженедельно загружает миллионы пакетов. И в большинстве случаев этого достаточно, если вы создаете что-то с нуля. Но как насчет альтернативных способов обнаружения мобильных браузеров с помощью JavaScript?

Иногда вам может понадобиться простое решение, которое работает без каких-либо библиотек. И в этой статье я расскажу вам о нескольких методах JavaScript для обнаружения мобильных пользователей. Дайте мне знать, если я что-то пропустил!

навигатор.userAgent

Святым Граалем обнаружения браузера является свойство navigator.UserAgent.

 if (https://c6c8j7x5.rocketcdn.me/Android|iPhone/i.test(navigator.userAgent)) { // This checks if the current device is in fact mobile } // an alternative structure to check individual matches if ( navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/iPhone/i) ) { // making individual checks }

Это, конечно, очень примитивный способ сделать это. Им можно легко манипулировать, так как свойство User-Agent можно подделать. Но, поскольку он выполняет свою работу, вы все равно можете использовать его в различных проектах. Например, целевые страницы или создание пользовательской переадресации на мобильную версию.

Как использовать navigator.userAgent для определения типа браузера и отображения контента в зависимости от конкретного браузера?

Итак, может быть уникальный вариант использования, когда вы хотите определить конкретный браузер, такой как Chrome и Firefox (или, в данном случае, Android и iPhone), а затем использовать эти данные для отображения определенного контента. Этот подход часто используется для предоставления/изменения ссылок для скачивания для определенных браузеров.

В таком случае вы можете использовать следующую функцию.

 function detectBrowser() { let userAgent = navigator.userAgent; let browserName; if (userAgent.match(/chrome|chromium|crios/i)) { browserName = "Chrome"; } else if (userAgent.match(/firefox|fxios/i)) { browserName = "Firefox"; } else if (userAgent.match(/safari/i)) { browserName = "Safari"; } else if (userAgent.match(/opr\//i)) { browserName = "Opera"; } else if (userAgent.match(/edg/i)) { browserName = "Edge"; } else if (userAgent.match(/android/i)) { browserName = "Android"; } else if (userAgent.match(/iphone/i)) { browserName = "iPhone"; } else { browserName = "Unknown"; } document.querySelector("div.form-style h3").innerText = "You are browsing with: " + browserName + ""; }

Вы можете закомментировать различные операторы else if для браузеров, которые вы не хотите проверять, а также добавить дополнительные браузеры, которые вы хотите проверить.

TouchEvent

Один из способов обнаружения мобильных пользователей — проверить, есть ли у устройства сенсорный экран.

Используя свойство GlobalEventHandlers.ontouchstart, вы можете выполнить простую проверку, чтобы увидеть, как пользователь взаимодействовал с вашим приложением. Если взаимодействие произошло с сенсорного экрана, вы можете вернуть мобильную версию приложения или страницы.

 if ("ontouchstart" in document.documentElement) { // content for touch-screen (mobile) devices } else { // everything else (desktop) }

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

Окно.matchMedia()

Window.matchMedia() — одно из лучших свойств для обнаружения мобильных пользователей с помощью JavaScript. И это так, потому что он позволяет вам напрямую взаимодействовать с CSS.

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

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

 let isMobile = window.matchMedia("(pointer:coarse)").matches;

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

 let isMobile = window.matchMedia("(any-pointer:coarse)").matches;

Имейте в виду, что это только проверяет запрос как истинный или ложный. Более совершенный способ проверки мобильных устройств — напрямую использовать медиа-запросы.

 let isMobile = window.matchMedia("only screen and (max-width: 480px)").matches;

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

Полезно в определенных контекстах

За прошедшие годы появилось множество свойств JavaScript для определения типов устройств. Многие из них устарели, но большинство других были интегрированы в библиотеки. Что также оказывается лучшим способом правильного обнаружения мобильных устройств.

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

Библиотеки для обнаружения мобильных устройств

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

UAParser.js

Что касается полных библиотек, UAParser — лучшее, что есть. С более чем 10 миллионами загрузок в неделю только на npm UAParser является де-факто решением для обнаружения мобильных устройств. Как следует из названия, библиотека работает путем разбора строк User-Agent.

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

мобильный-detect.js

Это довольно простой порт библиотеки Mobile Detect для PHP, предоставленный сообществу Heinrich Goebl. Сама библиотека использует User-Agent для обнаружения, так что как мы обсуждали ранее — не лучший вариант.

Тем не менее, он должен работать, когда дело доходит до практичных HTML-шаблонов или портфолио проектов.

isMobile

Здесь у нас есть еще один взгляд на свойство User-Agent Navigator от Кая Маллеа. Хотя это все еще упрощенное решение, мне нравится, что isMobile предоставляет множество спецификаций. Например, вы можете протестировать любые мобильные устройства или определенные устройства, такие как телефон или планшет .

реагировать-устройство-обнаружение

Вы разработчик React.js?

Тогда эта библиотека от Михаила Лактионова для вас. Он работает так, как и следовало ожидать — сначала библиотека определяет тип устройства, а затем отображает представление на основе этого типа. Безупречно работает с интеграцией компонентов и может быть дополнительно настроен с помощью вызовов API.

Интересным фактом является количество селекторов, которые включает эта библиотека. Он охватывает такие устройства, как смарт-телевизоры, носимые устройства, различные устройства iPhone и многое другое. Это дает вам широкий выбор вариантов дизайна при создании приложения для конкретного устройства.