Доброго времени суток! Так как веб-приложения используются на мобильных устройствах очень часто, проверка наличия
мобильного устройства в веб-приложении — это то, что приходится делать часто.
В этой статье мы рассмотрим, как определить в JavaScript, использует ли пользователь мобильное устройство.
Сразу отмечу, что это не 100%-способ, но часто его бывает достаточно.
Обнаружение пользовательского агента
Один из способов проверки использования мобильного устройства — это проверка строки пользовательсого агента.
Это далеко не лучший способ проверить, поскольку строки пользовательского агента могут быть легко подделаны.
Тем не менее, это все еще универсальный способ проверить, какое устройство используется пользователем.
Чтобы получить строку пользовательского агента, мы можем использовать свойство navigator.userAgent.
Например, для проверки использования мобильного устройства мы можем написать:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
//...
}
В примере выше мы проверяем наличие всех релевантных ключевых слов с помощью регулярного выражения,
которые указывают на то, что пользователь использует мобильное устройство.
Проверка размер экрана
Мы также можем проверить размер экрана устройства, с которого пользователь загружает веб-приложение.
Однако учтите, что эта проверка сработает также и при ручном уменьшении окна браузера пользователем
на ПК.
Например, мы можем написать следующее:
const isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;
if (isMobile) {
//...
}
Если максимальная ширина составляет 760 пикселей или меньше, то мы можем предположить,
что пользователь заходит с мобильного устройства.
Проверка наличия сенсорных событий
Мы также можем проверить наличие сенсорных событий на устройстве в нашем коде JavaScript.
Например, мы можем написать:
const isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));
Если событие ontouchstart доступно в браузере, то, вероятно, это мобильное устройство,
поскольку большинство мобильных устройств имеют сенсорные экраны.
Свойство navigator.platform
Свойство navigator.platform также содержит строку пользовательского агента.
И этот способ более надежен, чем свойство navigation.userAgent.
Например, мы можем использовать его, написав:
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ||
(/Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.platform))) {
// ...
}
Таким образом, с помощью данных способов мы можем, с определенной долей уверености, предположить
использует ли пользователь веб-приложение с мобильного устройства.