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

Это не jQuery, но я нашел вот это: http://detectmobilebrowser.com/

Этот сайт предоставляет скрипты для определения мобильных браузеров на нескольких языках, в том числе и на JavaScript. Это может помочь вам с тем, что вы ищете.

Тем не менее, поскольку вы используете jQuery, вам стоит обратить внимание на коллекцию jQuery.support. Это набор свойств для определения возможностей текущего браузера. Документация здесь: http://api.jquery.com/jQuery.support/

Так как я не знаю, что именно вы пытаетесь сделать, не могу сказать, какой из этих методов будет наиболее полезен.

В любом случае, я думаю, что лучше всего вам либо перенаправить пользователей, либо написать другой скрипт для вывода с использованием серверного языка (если это возможно). Поскольку вы не совсем уверены в возможностях мобильного браузера, выполнение логики определения и изменения на стороне сервера будет самым надежным методом. Конечно, если у вас нет возможности использовать серверный язык, это все не имеет значения 😃

Для определения типа устройства клиента и отображения контента, специфичного для него (например, ссылки на магазин приложений для iPhone или Android), действительно полезно использовать User-Agent.

Вот простой пример на jQuery, который показывает скрытые элементы в зависимости от типа устройства пользователя:

/*** определяем UA клиента и показываем скрытые div для этого устройства ***/
var customizeForDevice = function(){
    var ua = navigator.userAgent;
    var checker = {
      iphone: ua.match(/(iPhone|iPod|iPad)/),
      blackberry: ua.match(/BlackBerry/),
      android: ua.match(/Android/)
    };
    if (checker.android){
        $('.android-only').show();
    }
    else if (checker.iphone){
        $('.idevice-only').show();
    }
    else if (checker.blackberry){
        $('.berry-only').show();
    }
    else {
        $('.unknown-device').show();
    }
}

Эта функция проверяет User-Agent браузера и показывает соответствующий контент для Android, iOS или BlackBerry. В случае, если устройство не распознано, выводится контент для не известного устройства.

Стоит отметить, что хотя это решение работает, оно может быть не совсем надежным, так как User-Agent можно подделать. Лучше всего использовать это решение как дополнение к другим методам определения устройства.

Эту реализацию предложили на сайте Graphics Maniacs: Detecting iPhone, iPod, iPad, Android and BlackBerry.

Вы можете использовать следующий код для определения, является ли устройство мобильным, основанный на информации из блога abeautifulsite.net:

var isMobile = {
    Android: function() {
        return navigator.userAgent.match(/Android/i);
    },
    BlackBerry: function() {
        return navigator.userAgent.match(/BlackBerry/i);
    },
    iOS: function() {
        return navigator.userAgent.match(/iPhone|iPad|iPod/i);
    },
    Opera: function() {
        return navigator.userAgent.match(/Opera Mini/i);
    },
    Windows: function() {
        return navigator.userAgent.match(/IEMobile/i);
    },
    any: function() {
        return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
    }
};

Затем, чтобы проверить, является ли устройство мобильным, вы можете использовать следующий условный оператор:

if(isMobile.any()) {
   // ваш код здесь...
}

Этот код использует свойство navigator.userAgent, чтобы проверить, какое устройство используется, и возвращает true, если это мобильное устройство.

Если под "мобильным" вы имеете в виду "малый экран", я использую следующий код:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

На iPhone вы получите значение window.screen.width равное 320. На Android это будет window.outerWidth, равное 480 (хотя это может зависеть от конкретной версии Android). Для iPad и Android-планшетов outerWidth будет, как правило, около 768, так что они будут отображать полное представление, как и ожидалось.

Чтобы проверить, является ли устройство мобильным, можно использовать следующую строку JavaScript:

var isMobile = ('ontouchstart' in document.documentElement && /mobi/i.test(navigator.userAgent));

Если строка User-Agent содержит 'Mobi' (по информации MDN) и доступен ontouchstart, то, скорее всего, устройство является мобильным.

EDIT: Обновлённый код регулярного выражения в ответ на комментарии. Используя регулярное выражение /mobi/i, флаг i делает его нечувствительным к регистру, а mobi соответствует всем мобильным браузерам. См. MDN.