Как надёжно определить, что приложение открыто на мобильном устройстве или на desktop, чтобы выбрать соответствующую версию интерфейса?

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

Основные подходы

• CSS media queries — самый надёжный способ адаптировать интерфейс. Браузер сам знает реальные размеры окна.
• JavaScript matchMedia — позволяет реагировать на изменения viewport в рантайме.
• Feature detection — проверка наличия touch-событий, hover, pointer.
• User-Agent и Client Hints — нужны только для серверного редиректа или аналитики.

Пример на JavaScript

const isMobile = window.matchMedia('(max-width: 768px)').matches;
const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
const canHover = window.matchMedia('(hover: hover)').matches;

if (isMobile || (hasTouch && !canHover)) {
  loadMobileUI();
} else {
  loadDesktopUI();
}

// Реакция на поворот экрана
window.matchMedia('(max-width: 768px)')
  .addEventListener('change', e => e.matches ? loadMobileUI() : loadDesktopUI());

Серверное определение

Если нужен редирект на отдельный домен (например, m.example.com), на сервере смотрят User-Agent и заголовки Sec-CH-UA-Mobile из Client Hints. Но такой подход устаревает: современный стандарт — один адаптивный сайт.

Итог: для выбора версии интерфейса используй CSS media queries и matchMedia — они отражают реальные возможности устройства. User-Agent применяй только как вспомогательный сигнал для аналитики или серверного редиректа, но не как единственный критерий.