JavaScript: определение мобильных устройств (Devices JS)

Раздел: JavaScript -> Мобильные устройства

Определение мобильных устройств в JavaScript

Как определить, что пользователь зашел с мобильного устройства, используя строку User-Agent?

Самый распространённый способ - разбор свойства navigator.userAgent с помощью регулярного выражения. Этот метод работает во всех браузерах и не требует дополнительных библиотек.

function isMobile() {
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
}

Devices js (devices js)

Функция возвращает true, если найдена хотя бы одна из указанных подстрок. Пример использования:

if (isMobile()) {
  console.log('Мобильное устройство');
} else {
  console.log('Десктоп или планшет');
}

Проблема: некоторые десктопные браузеры могут имитировать мобильные User-Agent (например, инструменты разработчика). Кроме того, список ключевых слов со временем устаревает - новые устройства могут не обнаруживаться. Регулярное выражение также может ложно срабатывать на планшетах (iPad в десктопном режиме).

Решение: дополнить проверку другими методами (см. варианты ниже).

Как определить мобильное устройство по размеру экрана через matchMedia?

Метод window.matchMedia позволяет проверить медиа-запросы, не загружая CSS. Популярный подход - проверка ширины viewport.

const isMobileByWidth = window.matchMedia('(max-width: 768px)').matches;

Значение true при ширине до 768px (включая мобильные в портретной ориентации).

Проблема: многие планшеты имеют ширину более 768px, поэтому они будут определены как десктоп. Также пользователь может изменить размер окна браузера на десктопе, что приведёт к ложному срабатыванию.

Решение: комбинировать с проверкой наличия сенсорного экрана или User-Agent.

Как определить наличие сенсорного экрана с помощью navigator.maxTouchPoints?

Свойство navigator.maxTouchPoints (или navigator.msMaxTouchPoints для старых IE) возвращает количество поддерживаемых точек касания. Если значение больше 0, устройство поддерживает touch-ввод.

const isTouchDevice = navigator.maxTouchPoints > 0;

Пример:

console.log('Touch supported:', isTouchDevice);

Проблема: многие современные ноутбуки имеют сенсорные экраны, а некоторые мобильные устройства могут не сообщать о touch (редко). Этот метод не различает мобильное и десктопное устройство, только наличие сенсора.

Решение: использовать в сочетании с другими проверками.

Как использовать библиотеку mobile-detect.js для точного определения?

Библиотека mobile-detect.js (MobileDetect) предоставляет удобный API для анализа User-Agent и классификации устройств.

const md = new MobileDetect(window.navigator.userAgent);
console.log(md.mobile());     // true, если мобильное
console.log(md.phone());      // true, если телефон
console.log(md.tablet());     // true, если планшет

Проблема: библиотека добавляет зависимость (около 5 КБ после сжатия). User-Agent может быть подменён. Также библиотека обновляется нерегулярно, что может привести к пропуску новых устройств.

Решение: загружать библиотеку только при необходимости (ленивая загрузка).

Как объединить несколько методов для надёжного определения?

Комбинирование User-Agent, matchMedia и maxTouchPoints даёт более точный результат. Пример:

function isMobileReliable() {
  const userAgentCheck = /android|iphone|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent);
  const widthCheck = window.matchMedia('(max-width: 768px) and (pointer: coarse)').matches;
  const touchCheck = navigator.maxTouchPoints > 1;
  return userAgentCheck || (widthCheck && touchCheck);
}

Проблема: сложность поддержки, возможны ложные срабатывания при нестандартных браузерах. Медиа-запрос pointer: coarse не поддерживается в старых браузерах.

Решение: использовать простой User-Agent как базовый, а комбинированные проверки как уточняющие.

Ниже приведены расширенные примеры применения различных подходов к определению устройств.

Примеры кода и их результаты

1. Проверка на конкретную операционную систему (Android / iOS):

Пример

function detectOS() {
  const ua = navigator.userAgent;
  if (/android/i.test(ua)) return 'Android';
  if (/iphone|ipad|ipod/i.test(ua)) return 'iOS';
  if (/windows phone/i.test(ua)) return 'Windows Phone';
  return 'Other';
}
console.log(detectOS());

// Возможный результат: "Android" или "iOS"

2. Различие между телефоном и планшетом с помощью User-Agent:

Пример

function isTablet() {
  const ua = navigator.userAgent;
  return /ipad|tablet|playbook|silk|android(?!.*mobile)/i.test(ua);
}
console.log(isTablet());

// true для iPad, планшетов Android, false для телефонов

3. Динамическая загрузка CSS для мобильных устройств:

Пример

if (isMobileReliable()) {
  const link = document.createElement('link');
  link.rel = 'stylesheet';
  link.href = 'mobile.css';
  document.head.appendChild(link);
}

4. Определение ориентации экрана с помощью matchMedia:

Пример

const isLandscape = window.matchMedia('(orientation: landscape)').matches;
const isPortrait = window.matchMedia('(orientation: portrait)').matches;
console.log('Landscape:', isLandscape, 'Portrait:', isPortrait);

// Например: Landscape: true, Portrait: false

5. Использование библиотеки device.js (не путать с mobile-detect) для получения типа устройства:

Пример

// Предполагается, что подключён script device.js
console.log(window.device);
// { type: 'mobile', os: 'iOS', version: '15.0', ... }

// Объект с подробной информацией

6. Асинхронная проверка с помощью navigator.connection (для мобильных сетей):

Пример

if ('connection' in navigator) {
  const connection = navigator.connection;
  console.log('Тип сети:', connection.effectiveType); // '4g', '3g', '2g', 'slow-2g'
}

// Например: '4g'

Devices JS - comments

Devices js (javascript)