Как проверить, является ли устройство мобильным, с помощью JavaScript?

Проверить, является ли устройство мобильным, с помощью JavaScript можно через анализ строки User Agent (свойство navigator.userAgent) с помощью регулярных выражений, либо через определение физических характеристик устройства: ширины экрана (window.innerWidth), поддержки touch-событий ('ontouchstart' in window) или отношения точек на дюйм (DPI). Наиболее надёжный современный способ — комбинация проверки ширины экрана и поддержки touch, так как User Agent легко подделать, а многие планшеты и ноутбуки с сенсорным экраном не являются «мобильными» в классическом понимании.

Почему просто User Agent — плохая идея (и как это делают новички)

Самый «наивный» метод — спарсить строку navigator.userAgent в поиске слов «Mobi», «Android», «iPhone», «iPad», «BlackBerry». Вот как выглядит типичный код, который можно найти в старых туториалах:

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

Этот метод работает в 80% случаев, но имеет критические недостатки:

• Легко подделывается: любой браузер на ПК позволяет изменить User Agent через инструменты разработчика. Пользователь может сознательно или случайно «притвориться» мобильным устройством.
• Не различает «мобильность» как сценарий использования: современный iPad с большим экраном, мышкой и клавиатурой формально имеет в User Agent подстроку «iPad», но пользователь ожидает десктопного интерфейса. А многие Android-планшеты тоже попадают под регулярку.
• User Agent некоторых браузеров (например, Samsung Internet) содержит десктопные подстроки даже на мобильных устройствах, что даёт ложно-отрицательные срабатывания.

Поэтому в современной веб-разработке принято ориентироваться не на то, «что за устройство», а на то, «как пользователь взаимодействует» и «сколько места на экране».

Основной современный метод: проверка ширины экрана и поддержки touch

Надёжный способ определить, что пользователю нужен «мобильный» интерфейс, — комбинация двух факторов: маленькая ширина экрана (обычно ≤ 768 пикселей) и наличие touch-экрана. Это отсекает десктопные мониторы (ширина большая) и стационарные машины с сенсорным экраном (например, современные моноблоки — у них ширина большая, но touch есть).

function isMobileDevice() {
  const isTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  const isSmallScreen = window.innerWidth <= 768;
  return isTouchScreen && isSmallScreen;
}

Пояснение:

• 'ontouchstart' in window — проверяет, поддерживает ли браузер touch-события. Возвращает true на большинстве телефонов и планшетов.
• navigator.maxTouchPoints — более точная современная проверка, возвращает количество одновременно поддерживаемых точек касания (0 на ПК без сенсорного экрана, 5–10 на мобильных).
• window.innerWidth <= 768 — стандартная точка перелома (breakpoint) для мобильных устройств. Можно подстроить под свой дизайн (например, 480px или 1024px).

Этот метод не сработает, если пользователь на телефоне, но держит его горизонтально (ширина становится больше 768px). В этом случае ваш код решит, что устройство «не мобильное», и покажет десктопную версию. Поэтому нужно добавить обработчик изменения размера окна (resize).

Продвинутый вариант с отслеживанием изменения ориентации

function isMobile() {
  const isTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  const isNarrow = window.innerWidth <= 768 || window.innerHeight <= 768;
  return isTouch && isNarrow;
}

// Обновляем значение при повороте экрана или изменении размера окна
window.addEventListener('resize', () => {
  const mobileNow = isMobile();
  if (mobileNow) {
    document.body.classList.add('mobile-version');
  } else {
    document.body.classList.remove('mobile-version');
  }
});

Метод через CSS Media Queries (передача состояния в JS)

Самый надёжный с точки зрения соответствия CSS-дизайну способ — использовать те же медиа-запросы, что и в стилях, и передавать их состояние в JavaScript через window.matchMedia().

// Создаём медиа-запрос, совпадающий с CSS-правилом для мобильных
const mobileMediaQuery = window.matchMedia('(max-width: 768px)');

function handleMobileChange(e) {
  if (e.matches) {
    console.log('Сейчас мобильный вид (ширина ≤ 768px)');
    // Выполняем мобильные скрипты
  } else {
    console.log('Сейчас десктопный вид');
  }
}

// Проверяем сейчас
handleMobileChange(mobileMediaQuery);

// Слушаем изменения (при повороте или изменении размера окна)
mobileMediaQuery.addEventListener('change', handleMobileChange);

Преимущество: вы используете ту же логику, что и CSS. Если в вашем CSS мобильная версия включается при 1024px, вы просто меняете значение в JS, и всё синхронизируется. Никакой путаницы с User Agent.

Недостаток: такой код не отличает планшет от телефона, если у них одинаковая ширина экрана (но часто это и не требуется — интерфейс должен подстраиваться под доступное пространство).

Когда всё же нужен User Agent: определение конкретных функций

Иногда требуется не просто «мобильное / не мобильное», а, например, отдельно обработать iOS-устройства (из-за особенностей Safari), или запретить запуск тяжёлой 3D-графики на старых Android. В таких случаях без User Agent не обойтись, но его следует использовать как дополнение, а не как основной критерий.

Пример: определение конкретной ОС или браузера

const ua = navigator.userAgent;
const isIOS = /iPhone|iPad|iPod/i.test(ua);
const isAndroid = /Android/i.test(ua);
const isSamsungBrowser = /SamsungBrowser/i.test(ua);

Если вы разрабатываете сайт на CMS (например, Joomla) и хотите показывать разные шаблоны для мобильных устройств, обычно это делается на уровне сервера (в PHP), где как раз анализируется User Agent. Но в чистом фронтенде лучше избегать такой привязки.

Сравнение методов определения мобильного устройства

Полный пример: готовый код для вашего сайта

Ниже приведён универсальный сниппет, который определяет «мобильность» на основе трёх параметров и обновляется при изменении размера окна. Он подходит для 99% задач.

(function() {
  function checkMobile() {
    // 1. Проверка ширины экрана
    const isNarrow = window.innerWidth <= 768;
    
    // 2. Проверка поддержки touch (сенсорный экран)
    const hasTouch = ('ontouchstart' in window) || (navigator.maxTouchPoints > 0);
    
    // 3. Финальный флаг
    const isMobile = isNarrow && hasTouch;
    
    // Добавляем/удаляем класс на <html> или <body>
    if (isMobile) {
      document.documentElement.classList.add('is-mobile');
      document.documentElement.classList.remove('is-desktop');
    } else {
      document.documentElement.classList.remove('is-mobile');
      document.documentElement.classList.add('is-desktop');
    }
    
    // Можно также триггерить пользовательское событие
    window.dispatchEvent(new CustomEvent('mobileChange', { detail: { isMobile } }));
    
    return isMobile;
  }
  
  // Запускаем при загрузке
  checkMobile();
  
  // Следим за изменениями размера окна (с throttle для производительности)
  let resizeTimer;
  window.addEventListener('resize', function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(checkMobile, 150);
  });
})();

После подключения этого скрипта вы можете в CSS писать стили для класса .is-mobile (например, уменьшать шрифты, скрывать тяжёлые элементы), а в JavaScript — проверять document.documentElement.classList.contains('is-mobile').

Важное предупреждение: не путайте определение устройства с адаптивным дизайном

Современный подход в веб-разработке — отказ от проверки «мобильности» как таковой. Вместо этого используется резиновая вёрстка (fluid), flexbox, grid и медиа-запросы, которые подстраивают интерфейс под любую ширину экрана, будь то телефон, планшет, десктоп или телевизор. JavaScript-проверки нужны только для специфических случаев:

• Загрузка разных версий тяжёлых библиотек (например, упрощённой карты для мобильных).
• Отключение сложных 3D-анимаций на слабых устройствах.
• Перенаправление на отдельный мобильный домен (m.example.com) — но это считается устаревшей практикой, лучше делать единый адаптивный сайт.
• Включение голосового ввода или других мобильных API, доступных только на телефонах.

Если вы используете конструктор сайтов (например, SitePro.by), то вся логика адаптивности уже встроена в конструктор — вам не нужно писать JavaScript для определения мобильного устройства. Но если вы разрабатываете сайт с нуля, описанные выше методы помогут точно определить, когда нужно включать «мобильный режим».

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