Как обнаруживать мобильные устройства в JavaScript: Полное руководство

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

// Использование
if (isMobile()) {
  console.log("Обнаружено мобильное устройство");
  // Перенаправление на мобильную версию сайта или применение мобильных стилей
}

// Более комплексный шаблон регулярного выражения
function isMobileAdvanced() {
  const regex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i;
  return regex.test(navigator.userAgent);
}

// Альтернативный подход - проверка ключевых слов мобильных устройств
function isMobileUserAgent() {
  const userAgent = navigator.userAgent || navigator.vendor || window.opera;
  return /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
}

<script src="https://cdn.jsdelivr.net/npm/mobile-detect@2.1.0/mobile-detect.min.js"></script>

const md = new MobileDetect(window.navigator.userAgent);
const isMobile = md.mobile() !== null;

// Проверка конкретных типов устройств
const isPhone = md.phone();
const isTablet = md.tablet();
const isDesktop = !md.mobile();

// Проверка конкретных операционных систем
const isIOS = md.os() === 'iOS';
const isAndroid = md.os() === 'AndroidOS';

<script src="https://unpkg.com/is-mobile@1.0.0/isMobile.min.js"></script>

// Простое возвращение булевого значения
if (isMobile()) {
  // Обнаружено мобильное устройство
}

// Более детальное определение
const deviceInfo = isMobile;
console.log(deviceInfo); // Возвращает подробную информацию об устройстве

const parser = new UAParser();
const result = parser.getResult();
const isMobileDevice = result.device.type === 'mobile' || result.device.type === 'tablet';

/**
 * Определяет, использует ли пользователь мобильное устройство
 * @returns {boolean} True, если обнаружено мобильное устройство, иначе false
 */
function isMobileDevice() {
  // Проверка распространенных строк пользовательского агента мобильных устройств
  const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  return mobileRegex.test(navigator.userAgent);
}

// Пример использования
document.addEventListener('DOMContentLoaded', function() {
  if (isMobileDevice()) {
    document.body.classList.add('mobile-device');
    // Применение мобильных стилей или функциональности
  }
});

/**
 * Определяет мобильные устройства с использованием нескольких методов для большей точности
 * @returns {boolean} True, если обнаружено мобильное устройство
 */
function isMobileDeviceAdvanced() {
  // Метод 1: Проверка пользовательского агента
  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  const isMobileUA = mobileRegex.test(navigator.userAgent);
  
  // Метод 2: Определение сенсорного экрана
  const hasTouchScreen = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
  
  // Метод 3: Проверка размера экрана (опционально)
  const isSmallScreen = window.innerWidth <= 768;
  
  // Метод 4: CSS медиа-запросы (наиболее надежный)
  const isMobileMQ = window.matchMedia('(max-width: 768px)').matches;
  
  // Возвращает true, если любой метод указывает на мобильное устройство
  return isMobileUA || (hasTouchScreen && isSmallScreen) || isMobileMQ;
}

// Использование
const deviceType = isMobileDeviceAdvanced() ? 'mobile' : 'desktop';
console.log('Тип устройства:', deviceType);

import React, { useEffect, useState } from 'react';
import MobileDetect from 'mobile-detect';

const MobileDetector = ({ children }) => {
  const [isMobile, setIsMobile] = useState(false);
  
  useEffect(() => {
    const md = new MobileDetect(window.navigator.userAgent);
    setIsMobile(md.mobile() !== null);
  }, []);
  
  return children({ isMobile });
};

// Использование
<MobileDetector>
  {({ isMobile }) => (
    <div className={isMobile ? 'mobile-view' : 'desktop-view'}>
      {/* Ваш контент здесь */}
    </div>
  )}
</MobileDetector>

// Кэширование результата для избежания повторных вычислений
let mobileCache = null;

function isMobileCached() {
  if (mobileCache === null) {
    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
    mobileCache = regex.test(navigator.userAgent);
  }
  return mobileCache;
}

function isMobileSafe() {
  try {
    if (typeof navigator === 'undefined' || typeof navigator.userAgent === 'undefined') {
      return false; // По умолчанию десктоп в серверных средах
    }
    const regex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
    return regex.test(navigator.userAgent);
  } catch (error) {
    console.error('Ошибка определения мобильного устройства:', error);
    return false; // Безопасный сбой
  }
}

function isMobileMediaQuery() {
  return window.matchMedia('(max-width: 768px)').matches;
}

// Или более комплексное определение мобильных устройств
function isMobileDeviceMQ() {
  return window.matchMedia('(max-width: 768px) and (pointer: coarse)').matches;
}

function isTouchDevice() {
  return 'ontouchstart' in window || 
         navigator.maxTouchPoints > 0 || 
         navigator.msMaxTouchPoints > 0;
}

function isMobileOrientation() {
  return 'orientation' in window || 'orientation' in screen;
}

/**
 * Комплексное определение мобильных устройств с использованием нескольких методов
 * @returns {object} Результаты определения устройства
 */
function detectDevice() {
  const results = {
    isMobile: false,
    isTablet: false,
    isPhone: false,
    isDesktop: false,
    isIOS: false,
    isAndroid: false,
    userAgent: navigator.userAgent || ''
  };

  // Определение по пользовательскому агенту
  const mobileRegex = /Mobi|Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i;
  const iosRegex = /iPhone|iPad|iPod/i;
  const androidRegex = /Android/i;
  
  results.isMobile = mobileRegex.test(results.userAgent);
  results.isIOS = iosRegex.test(results.userAgent);
  results.isAndroid = androidRegex.test(results.userAgent);

  // Определение по размеру экрана
  const isSmallScreen = window.innerWidth <= 768;
  const isMediumScreen = window.innerWidth > 768 && window.innerWidth <= 1024;
  
  results.isTablet = results.isMobile && isMediumScreen;
  results.isPhone = results.isMobile && isSmallScreen;
  results.isDesktop = !results.isMobile;

  return results;
}

// Использование
const device = detectDevice();
console.log('Информация об устройстве:', device);