Каков наилучший способ обнаружения мобильного устройства в jQuery?

Есть ли надежный способ определить, использует ли пользователь мобильное устройство в jQuery? Что-то похожее на атрибут CSS @media? Я хотел бы запустить другой скрипт, если браузер находится на карманном устройстве.

Функция jQuery $.browser не то, что я ищу.

Всего 19 ответов

Автоматический диспенсер мыльной пены от xiaomi.


Вместо использования jQuery вы можете использовать простой JavaScript для его обнаружения:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
 // some code..
}

Или вы можете объединить их, чтобы сделать его более доступным через jQuery ...

$.browser.device = (/android|webos|iphone|ipad|ipod|blackberry|iemobile|opera mini/i.test(navigator.userAgent.toLowerCase()));

Теперь $.browser вернет "device" для всех вышеперечисленных устройств

Примечание: $.browser удален на jQuery v1.9.1 . Но вы можете использовать это, используя плагин миграции jQuery. Код


Более тщательная версия:

var isMobile = false; //initiate as false
// device detection
if(/(android|bbd+|meego).+mobile|avantgo|bada/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|ipad|iris|kindle|Android|Silk|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)/|plucker|pocket|psp|series(4|6)0|symbian|treo|up.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(navigator.userAgent) 
    || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw-(n|u)|c55/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do(c|p)o|ds(12|-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(-|_)|g1 u|g560|gene|gf-5|g-mo|go(.w|od)|gr(ad|un)|haie|hcit|hd-(m|p|t)|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c(-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac( |-|/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |/)|klon|kpt |kwc-|kyo(c|k)|le(no|xi)|lg( g|/(k|l|u)|50|54|-[a-w])|libw|lynx|m1-w|m3ga|m50/|ma(te|ui|xo)|mc(01|21|ca)|m-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|-([1-8]|c))|phil|pire|pl(ay|uc)|pn-2|po(ck|rt|se)|prox|psio|pt-g|qa-a|qc(07|12|21|32|60|-[2-7]|i-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55/|sa(ge|ma|mm|ms|ny|va)|sc(01|h-|oo|p-)|sdk/|se(c(-|0|1)|47|mc|nd|ri)|sgh-|shar|sie(-|m)|sk-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h-|v-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl-|tdg-|tel(i|m)|tim-|t-mo|to(pl|sh)|ts(70|m-|m3|m5)|tx-9|up(.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas-|your|zeto|zte-/i.test(navigator.userAgent.substr(0,4))) { 
    isMobile = true;
}

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

В файле CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

В файле jQuery / JavaScript:

$( document ).ready(function() {      
    var is_mobile = false;

    if( $('#some-element').css('display')=='none') {
        is_mobile = true;       
    }

    // now i can use is_mobile to run javascript conditionally

    if (is_mobile == true) {
        //Conditional script here
    }
 });

Моя цель состояла в том, чтобы мой сайт был «мобильным». Поэтому я использую CSS Media Queries, чтобы отображать / скрывать элементы в зависимости от размера экрана.

Например, в моей мобильной версии я не хочу активировать Facebook Like Box, потому что он загружает все эти изображения профиля и прочее. И это не хорошо для мобильных посетителей. Таким образом, помимо скрытия элемента контейнера, я также делаю это внутри блока кода jQuery (см. Выше):

if(!is_mobile) {
    (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/pt_PT/all.js#xfbml=1&appId=210731252294735";
        fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));
}

Вы можете увидеть это в действии на http://lisboaautentica.com

Я все еще работаю над мобильной версией, поэтому он все еще не выглядит так, как должен, начиная с написания.

Обновление от dekin88

Для обнаружения носителей используется JavaScript API. Вместо использования вышеуказанного решения просто используйте следующее:

$( document ).ready(function() {      
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");

    if (isMobile.matches) {
        //Conditional script here
    }
 });

Поддержка браузера: http://caniuse.com/#feat=matchmedia

Преимущество этого метода заключается в том, что он не только упрощен и короче, но вы можете отдельно настроить различные устройства, такие как смартфоны и планшеты, отдельно, без необходимости добавлять какие-либо фиктивные элементы в DOM.


Согласно Mozilla - обнаружение браузера с помощью агента пользователя :

Таким образом, мы рекомендуем искать строку «Mobi» в любом месте User Agent для обнаружения мобильного устройства.

Как это:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Это будет соответствовать всем обычным пользователям мобильных браузеров, включая мобильные Mozilla, Safari, IE, Opera, Chrome и т. Д.

Обновление для Android

EricL рекомендует тестировать Android как пользовательский агент, так как строка пользовательского агента Chrome для планшетов не включает в себя «Mobi» (однако, версии телефонов):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Простой и эффективный однострочный:

function isMobile() { return ('ontouchstart' in document.documentElement); }

Однако выше код не учитывает случай для ноутбуков с сенсорным экраном. Таким образом, я предоставляю эту вторую версию, основанную на решении @Julian :

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}

То, что вы делаете, желая обнаружить мобильное устройство, становится слишком близким к концепции IMO для браузера. Вероятно, было бы намного лучше сделать некоторые функции обнаружения. Такие библиотеки, как http://www.modernizr.com/, могут помочь с этим.

Например, где находится линия между мобильным и немобильным? Он становится все более и более размытым каждый день.


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

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

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

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

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


Иногда желательно узнать, какое устройство бренда использует клиент, чтобы показывать контент, специфичный для этого устройства, например ссылку на iPhone-магазин или рынок Android. Модернизатор замечательный, но только показывает возможности браузера, такие как HTML5 или Flash.

Вот мое решение UserAgent в jQuery для отображения другого класса для каждого типа устройства:

/*** sniff the UA of the client and show hidden div's for that device ***/
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();
    }
}

Это решение от Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/


Нашел решение в: http://www.abeautifulsite.net/blog/2011/11/detecting-mobile-devices-with-javascript/ .

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()) {
   //some code...
}

Если «мобильный» означает «маленький экран», я использую это:

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

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


Если вы используете Modernizr , очень легко использовать Modernizr.touch как упоминалось ранее.

Тем не менее, я предпочитаю использовать комбинацию тестов Modernizr.touch и User Agent, чтобы быть в безопасности.

var deviceAgent = navigator.userAgent.toLowerCase();

var isTouchDevice = Modernizr.touch || 
(deviceAgent.match(/(iphone|ipod|ipad)/) ||
deviceAgent.match(/(android)/)  || 
deviceAgent.match(/(iemobile)/) || 
deviceAgent.match(/iphone/i) || 
deviceAgent.match(/ipad/i) || 
deviceAgent.match(/ipod/i) || 
deviceAgent.match(/blackberry/i) || 
deviceAgent.match(/bada/i));

if (isTouchDevice) {
        //Do something touchy
    } else {
        //Can't touch this
    }

Если вы не используете Modernizr, вы можете просто заменить функцию Modernizr.touch выше ('ontouchstart' in document.documentElement)

Также обратите внимание, что тестирование пользовательского агента iemobile даст вам более широкий диапазон обнаруженных мобильных устройств Microsoft, чем Windows Phone .

Также см. Этот вопрос SO


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

CSS использует width (Media Queries), чтобы определить, какие стили применяются к веб-документу, основанному на ширине. Почему бы не использовать ширину в JavaScript?

Например, в Bootstrap (Mobile First) Media Queries существует 4 точки привязки / останова:

  • Дополнительные малые устройства - 768 пикселей и меньше.
  • Малые устройства варьируются от 768 до 991 пикселей.
  • Средние устройства - от 992 до 1199 пикселей.
  • Большие устройства - 1200 пикселей и выше.

Мы можем использовать это, чтобы также решить проблему JavaScript.

Сначала мы создадим функцию, которая получает размер окна и возвращает значение, которое позволяет нам видеть, какое устройство размера просматривает наше приложение:

var getBrowserWidth = function(){
    if(window.innerWidth < 768){
        // Extra Small Device
        return "xs";
    } else if(window.innerWidth < 991){
        // Small Device
        return "sm"
    } else if(window.innerWidth < 1199){
        // Medium Device
        return "md"
    } else {
        // Large Device
        return "lg"
    }
};

Теперь, когда у нас установлена ​​функция, мы можем назвать это хранилищем значение:

var device = getBrowserWidth();

Ваш вопрос был

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

Теперь, когда у нас есть информация об устройстве, все, что осталось, это оператор if:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Вот пример на CodePen: http://codepen.io/jacob-king/pen/jWEeWG


Если вас не особо беспокоят маленькие дисплеи, вы можете использовать определение ширины и высоты. Таким образом, если ширина находится под определенным размером, мобильный сайт взлетает вверх. Возможно, это не идеальный способ, но, вероятно, это будет проще всего обнаружить для нескольких устройств. Возможно, вам понадобится указать конкретный вариант для iPhone 4 (большое разрешение).


В одной строке javascript:

var isMobile = ('ontouchstart' in document.documentElement && navigator.userAgent.match(/Mobi/));

Если пользовательский агент содержит «Mobi» (в соответствии с MDN) и доступен ontouchstart, он скорее всего будет мобильным устройством.


Вы не можете полагаться на navigator.userAgent , не каждое устройство показывает свою настоящую ОС. Например, на моем HTC это зависит от настроек («использование мобильной версии» вкл / выкл). На http://my.clockodo.com мы просто использовали screen.width для обнаружения небольших устройств. К сожалению, в некоторых версиях Android есть ошибка с screen.width. Вы можете комбинировать этот путь с userAgent:

if(screen.width < 500 ||
 navigator.userAgent.match(/Android/i) ||
 navigator.userAgent.match(/webOS/i) ||
 navigator.userAgent.match(/iPhone/i) ||
 navigator.userAgent.match(/iPod/i)) {
alert("This is a mobile device");
}

Я удивлен, что никто не указал на хороший сайт: http://detectmobilebrowsers.com/ Он имеет готовый код на разных языках для обнаружения мобильных устройств (включая, но не ограничиваясь ими):

  • апаш
  • ASP
  • C #
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • питон
  • Рельсы

И если вам нужно также обнаружить планшеты, просто отметьте раздел «О» для дополнительного параметра RegEx.

Android-планшеты, iPad, Kindle Fires и PlayBook не определяются по дизайну. Чтобы добавить поддержку для планшетов, добавьте |android|ipad|playbook|silk в первое регулярное выражение.


Чтобы добавить дополнительный уровень управления, я использую хранилище HTML5, чтобы определить, использует ли он мобильное хранилище или настольное хранилище. Если браузер не поддерживает память, у меня есть массив имен мобильных браузеров, и я сравниваю агент пользователя с браузерами в массиве.

Это довольно просто. Вот функция:

// Used to detect whether the users browser is an mobile browser
function isMobile() {
    ///<summary>Detecting whether the browser is a mobile browser or desktop browser</summary>
    ///<returns>A boolean value indicating whether the browser is a mobile browser or not</returns>

    if (sessionStorage.desktop) // desktop storage 
        return false;
    else if (localStorage.mobile) // mobile storage
        return true;

    // alternative
    mobile = ['iphone','ipad','android','blackberry','nokia','opera mini','windows mobile','windows phone','iemobile','tablet','mobi']; 
    var ua=navigator.userAgent.toLowerCase();
    for (var i in mobile) if (ua.indexOf(mobile[i]) > -1) return true;

    // nothing found.. assume desktop
    return false;
}

Советую вам проверить http://wurfl.io/

Вкратце, если вы импортируете крошечный файл JavaScript:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Вы останетесь с объектом JSON, который выглядит так:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Предполагается, что вы используете Nexus 7, конечно), и вы сможете делать такие вещи, как:

if(WURFL.is_mobile) {
    //dostuff();
}

Это то, что вы ищете.

Отказ от ответственности: я работаю в компании, предлагающей эту бесплатную услугу.


Вот функция, которую вы можете использовать для получения истинного / ложного ответа о том, работаете ли вы в мобильном браузере. Да, это обнюхивает браузер, но иногда это именно то, что вам нужно.

function is_mobile() {
    var agents = ['android', 'webos', 'iphone', 'ipad', 'blackberry'];
    for(i in agents) {
        if(navigator.userAgent.match('/'+agents[i]+'/i')) {
            return true;
        }
    }
    return false;
}

Проверьте этот пост , он дает действительно хороший фрагмент кода для того, что делать, когда сенсорные устройства обнаруживаются или что делать, если вызывается событие touchstart:

$(function(){
  if(window.Touch) {
    touch_detect.auto_detected();
  } else {
    document.ontouchstart = touch_detect.surface;
  }
}); // End loaded jQuery
var touch_detect = {
  auto_detected: function(event){
    /* add everything you want to do onLoad here (eg. activating hover controls) */
    alert('this was auto detected');
    activateTouchArea();
  },
  surface: function(event){
    /* add everything you want to do ontouchstart here (eg. drag & drop) - you can fire this in both places */
    alert('this was detected by touching');
    activateTouchArea();
  }
}; // touch_detect
function activateTouchArea(){
  /* make sure our screen doesn't scroll when we move the "touchable area" */
  var element = document.getElementById('element_id');
  element.addEventListener("touchstart", touchStart, false);
}
function touchStart(event) {
  /* modularize preventing the default behavior so we can use it again */
  event.preventDefault();
}

Есть идеи?

10000