Как определить мобильное устройство с помощью jQuery (или JavaScript)?

Правильный подход к определению мобильных устройств

Вы совершенно правы — проверка ширины окна через $(window).width() ненадежна для определения типа устройства. Это называется "responsive detection" (отзывчивое определение), и оно подходит только для CSS-медиазапросов, но не для логики JavaScript, которая должна различать мобильные и десктопные устройства.

Самый надежный способ — использовать комбинацию проверки user-agent и возможностей устройства. jQuery здесь не обязателен, но мы можем его использовать для удобства манипуляции DOM. Вот проверенное решение:

Базовое определение через navigator.userAgent

// Функция для определения мобильного устройства
function isMobileDevice() {
    // Проверяем user-agent на наличие мобильных браузеров
    const userAgent = navigator.userAgent || navigator.vendor || window.opera;
    
    // Регулярное выражение для мобильных устройств
    const mobileRegex = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Mobile|Tablet/i;
    
    // Проверка на наличие сенсорного экрана (дополнительная защита)
    const hasTouchScreen = ('ontouchstart' in window) || 
                           (navigator.maxTouchPoints > 0) || 
                           (navigator.msMaxTouchPoints > 0);
    
    // Дополнительная проверка: планшеты с большим экраном, но с сенсорным управлением
    const isTablet = /iPad|Tablet|PlayBook|Silk/i.test(userAgent) || 
                     (window.innerWidth >= 768 && window.innerWidth <= 1024 && hasTouchScreen);
    
    return mobileRegex.test(userAgent) || hasTouchScreen || isTablet;
}

Использование с jQuery

$(document).ready(function() {
    if (isMobileDevice()) {
        // Применяем мобильные настройки
        $('.desktop-menu').hide();
        $('.mobile-menu').show();
        $('body').addClass('mobile-device');
        
        // Отключаем тяжелые анимации
        $('.heavy-animation').remove();
        
        console.log('Мобильное устройство обнаружено');
    } else {
        // Десктопная версия
        $('.desktop-menu').show();
        $('.mobile-menu').hide();
        $('body').addClass('desktop-device');
    }
});

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

// Более детальное определение
function getDeviceType() {
    const ua = navigator.userAgent;
    
    // Сначала проверяем явные признаки мобильных ОС
    if (/Android|webOS|iPhone|iPod|BlackBerry|IEMobile|Opera Mini/i.test(ua)) {
        return 'phone';
    }
    
    // Проверка на iPad (начиная с iPadOS 13 user-agent как у десктопа)
    if (/iPad/i.test(ua) || (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)) {
        return 'tablet';
    }
    
    // Проверка на другие планшеты
    if (/Tablet|PlayBook|Silk/i.test(ua)) {
        return 'tablet';
    }
    
    // Дополнительная проверка через размер экрана и сенсор
    const hasTouch = 'ontouchstart' in window || navigator.maxTouchPoints > 0;
    const width = window.innerWidth;
    
    if (hasTouch && width <= 1024) {
        return width <= 768 ? 'phone' : 'tablet';
    }
    
    return 'desktop';
}

// Пример использования с jQuery
$(document).ready(function() {
    const device = getDeviceType();
    $('body').addClass('device-' + device);
    
    // Адаптируем интерфейс
    if (device === 'phone') {
        // Упрощенный интерфейс для телефонов
        $('.desktop-features').addClass('hidden-mobile');
    } else if (device === 'tablet') {
        // Специальная версия для планшетов
        $('.sidebar').css('width', '250px');
    }
});

Важные замечания

• Не используйте только jQuery-плагины — многие из них устарели и не учитывают современные устройства (например, iPad Pro или складные телефоны).
• User-agent можно подделать — но в 99% случаев обычные пользователи этого не делают.
• Для критической логики (например, оплата) лучше проверять возможности устройства, а не тип: if ('ontouchstart' in window).
• Современная альтернатива — использовать CSS media queries для стилей и JavaScript только для сложной логики.

Ваш код с $(window).width() лучше заменить на проверку user-agent, как показано выше. Это даст надежное определение в 95% случаев. Для оставшихся 5% (редкие устройства или эмуляторы) можно добавить ручной переключатель в интерфейсе.

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

// Функция-обработчик
function handleMobileChange(e) {
    if (e.matches) {
        // Эквивалентно ширине < 768px
        $('.desktop-menu').hide();
        $('.mobile-menu').show();
    } else {
        $('.desktop-menu').show();
        $('.mobile-menu').hide();
    }
}

// Первоначальная проверка
handleMobileChange(mobileMediaQuery);

// Слушаем изменения размера окна
mobileMediaQuery.addListener(handleMobileChange);