Как определить тип устройства в JavaScript: обзор техник

Расширенные примеры и нестандартные сценарии определения устройств в JavaScript.

Пример 1: Определение устройства на сервере (Node.js) с помощью библиотеки device-detector-js

// Установка: npm install device-detector-js
const DeviceDetector = require('device-detector-js');
const deviceDetector = new DeviceDetector();

const userAgent = 'Mozilla/5.0 (Linux; Android 12; SM-G991B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36';
const result = deviceDetector.parse(userAgent);

console.log('Тип устройства:', result.device?.type); // "smartphone"
console.log('Бренд:', result.device?.brand); // "Samsung"
console.log('Модель:', result.device?.model); // "Galaxy S21"

Тип устройства: smartphone
Бренд: Samsung
Модель: Galaxy S21

Пример 2: Динамическое переключение между мобильной и десктопной версиями с использованием matchMedia и слушателя событий

const mobileMediaQuery = window.matchMedia('(max-width: 767px)');

function handleLayoutChange(e) {
  if (e.matches) {
    console.log('Мобильное представление (ширина <= 767px)');
    // Здесь можно подгрузить мобильные стили или скрипты
  } else {
    console.log('Десктопное представление (ширина > 767px)');
  }
}

mobileMediaQuery.addEventListener('change', handleLayoutChange);
// Первоначальная проверка
handleLayoutChange(mobileMediaQuery);

Мобильное представление (ширина <= 767px)

Пример 3: Определение ориентации экрана и типа устройства для адаптации интерфейса

function detectOrientationAndDevice() {
  const orientation = screen.orientation?.type || (window.innerHeight > window.innerWidth ? 'portrait' : 'landscape');
  const isTouch = ('ontouchstart' in window) && window.matchMedia('(pointer: coarse)').matches;
  const isMobile = window.matchMedia('(max-width: 480px)').matches;
  
  let deviceType = 'desktop';
  if (isTouch && isMobile) deviceType = 'phone';
  else if (isTouch && !isMobile) deviceType = 'tablet';
  
  console.log(`Ориентация: ${orientation}, Устройство: ${deviceType}`);
}

detectOrientationAndDevice();

Ориентация: portrait, Устройство: phone

Пример 4: Использование Modernizr для проверки поддержки определённых возможностей (touch, pointer)

// Modernizr подключается глобально
if (Modernizr.touchevents) {
  console.log('Сенсорные события поддерживаются');
} else {
  console.log('Сенсорные события отсутствуют');
}

if (Modernizr.pointerevents) {
  console.log('Pointer Events доступны');
}

Сенсорные события поддерживаются
Pointer Events доступны

Пример 5: Расширенный парсинг user-agent с использованием нескольких регулярных выражений для извлечения ОС и браузера

function parseUserAgent(ua) {
  const uaLower = ua.toLowerCase();
  const os = (() => {
    if (/windows phone/.test(uaLower)) return 'Windows Phone';
    if (/android/.test(uaLower)) return 'Android';
    if (/iphone|ipad|ipod/.test(uaLower)) return 'iOS';
    if (/macintosh|mac os x/.test(uaLower)) return 'macOS';
    if (/windows/.test(uaLower)) return 'Windows';
    if (/linux/.test(uaLower)) return 'Linux';
    return 'Unknown';
  })();
  const browser = (() => {
    if (/edge/.test(uaLower)) return 'Edge';
    if (/opr|opera/.test(uaLower)) return 'Opera';
    if (/chrome/.test(uaLower)) return 'Chrome';
    if (/safari/.test(uaLower)) return 'Safari';
    if (/firefox/.test(uaLower)) return 'Firefox';
    return 'Unknown';
  })();
  const isMobile = /mobile|tablet|iemobile|touch/.test(uaLower);
  return { os, browser, isMobile };
}

const info = parseUserAgent(navigator.userAgent);
console.log('ОС:', info.os);
console.log('Браузер:', info.browser);
console.log('Мобильное:', info.isMobile);

ОС: Android
Браузер: Chrome
Мобильное: true

Пример 6: Определение устройства по размеру экрана и плотности пикселей (Retina)

const dpr = window.devicePixelRatio || 1;
const smallScreen = window.innerWidth < 768;
const isRetina = dpr >= 2;

let device = 'desktop';
if (smallScreen && isRetina) {
  device = 'phone (Retina)';
} else if (smallScreen) {
  device = 'phone (standard)';
} else if (isRetina) {
  device = 'tablet/desktop (Retina)';
}
console.log('Устройство:', device);

Устройство: phone (Retina)

Пример 7: Использование navigator.platform (устаревшее, но иногда полезное)

const platform = navigator.platform.toLowerCase();
let deviceType = 'unknown';
if (platform.includes('win') || platform.includes('mac') || platform.includes('linux')) {
  deviceType = 'desktop';
} else if (platform.includes('ipad') || platform.includes('tablet')) {
  deviceType = 'tablet';
} else if (platform.includes('iphone') || platform.includes('android')) {
  deviceType = 'phone';
}
console.log('Тип (платформа):', deviceType);

Тип (платформа): desktop

Эти примеры охватывают как серверные, так и клиентские подходы, включая использование событий, определения ориентации, плотности пикселей и устаревших свойств. Для production рекомендуется комбинировать несколько методов и обрабатывать крайние случаи.