Создайте свою собственную библиотеку JavaScript для обнаружения мобильных браузеров
web-development javascript javascript-development javascript-libraries mobile snippets libraries responsive

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

14 марта 2022 г.

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


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


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


навигатор.userAgent


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


```javascript


если (/Android|iPhone/i.test(navigator.userAgent)) {


// Это проверяет, действительно ли текущее устройство является мобильным


// альтернативная структура для проверки отдельных совпадений


если (


navigator.userAgent.match(/Android/i) ||


navigator.userAgent.match(/iPhone/i)


// делаем отдельные проверки


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


Например. Целевые страницы или создание кастомной переадресации на мобильную версию.


TouchEvent


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


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


```javascript


если ("ontouchstart" в document.documentElement)


// контент для сенсорных (мобильных) устройств


еще


// все остальное (рабочий стол)


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


Окно.matchMedia()



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


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


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


```javascript


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


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


```javascript


let isMobile = window.matchMedia("(любой указатель: грубый)").matches;



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


```javascript


let isMobile = window.matchMedia("только экран и (максимальная ширина: 480px)").matches;



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


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


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


UAParser.js


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


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


GitHub Документация


mobile-detect.js



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


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


GitHub Документация


isMobile


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


GitHub Документация


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


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


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


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


GitHub Документация


  • Впервые опубликовано [здесь] (https://stackdiary.com/detect-mobile-browser-javascript/)*

Оригинал

Recent Post

Categories

PREVIOUS ARTICLE
NEXT ARTICLE