Який найкращий спосіб виявити мобільний пристрій?

Чи є надійний спосіб визначити, користувач користується мобільним пристроєм у jQuery? Щось схоже на атрибут CSS @media? Я хотів би запустити інший сценарій, якщо браузер знаходиться на портативному пристрої.

Функція jQuery $.browser- це не те, що я шукаю.

Примітка редактора: виявлення користувацьких агентів не є рекомендованою методикою для сучасних веб-додатків. Дивіться коментарі нижче цієї відповіді для підтвердження цього факту. Пропонується використовувати один з інших відповідей за допомогою виявлення функцій та / або медіа-запитів.

Замість використання 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 міграційний плагін Code

Більш ретельна версія:

var isMobile = false; //initiate as false
// device detection
if(/(android|bb\d+|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

Є вбудований API JavaScript для виявлення медіа. Замість використання вищевказаного рішення просто використовуйте наступне:

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

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

Підтримка веб-переглядача: http://caniuse.com/#feat=matchmedia

Перевага цього методу полягає в тому, що він не тільки простіший і коротший, але ви можете умовно орієнтувати різні пристрої, такі як смартфони та планшети, окремо, якщо це необхідно, без необхідності додавати будь-які фіктивні елементи в DOM.

За даними Mozilla - виявлення браузера за допомогою агента користувача :

Підсумовуючи, ми рекомендуємо шукати рядок "Mobi" в будь-якій точці Користувального агента для виявлення мобільного пристрою.

Подобається це:

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; }
}

Те, що ви робите, бажаючи виявити мобільний пристрій, стає занадто близьким до ІМО концепції "нюхає браузер". Можливо, буде набагато краще зробити детекцію функції. Бібліотеки на зразок 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 ви отримаєте window.outerWidth 480 (хоча це може залежати від Android). iPad та планшети Android повертатимуть цифри на зразок 768, тож вони отримають повний вигляд, як ви хочете.

Якщо ви використовуєте Modernizr , це дуже просто у використанні, Modernizr.touchяк згадувалося раніше.

Однак я вважаю за краще використовувати комбінацію Modernizr.touchта тестування агента користувача, аби бути безпечною.

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.

Дивіться також це питання

Ви не можете розраховувати 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");
}

Я знаю, що на це питання є багато відповідей, але з того, що я бачив, ніхто не підходить до відповіді так, як я би вирішив це.

CSS використовує ширину (Media Media Queries) для визначення стилів, застосованих до веб-документа, заснованого на ширині. Чому б не використовувати ширину в JavaScript?

Наприклад, у мультимедійних запитах Bootstrap (для мобільних пристроїв) існує 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

В одному рядку javascript:

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

Якщо агент користувача містить "Mobi" (відповідно до MDN), і ontouchstart доступний, ймовірно, це мобільний пристрій.

Я здивований, що ніхто не вказав на приємний веб-сайт: http://detectmobilebrowsers.com/ Він готовий код на різних мовах для мобільного виявлення (включаючи, але не обмежуючись ними):

• Апач
• ASP
• C #
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Пітон
• Рейки

І якщо вам також потрібно виявити планшети, просто перевірте розділ About щодо додаткового параметра RegEx.

Планшети Android, iPad, Kindle Fires та PlayBooks не визначаються дизайном. Щоб додати підтримку планшетів, додайте |android|ipad|playbook|silkдо першого регексу.

Якщо ви не особливо переживаєте невеликі дисплеї, ви можете використовувати визначення ширини / висоти. Таким чином, якщо ширина знаходиться під певним розміром, мобільний сайт викидається. Це може бути не ідеальним способом, але його, мабуть, найлегше виявити на кількох пристроях. Можливо, вам доведеться поставити конкретний для iPhone 4 (велика роздільна здатність).

Щоб додати додатковий рівень контролю, я використовую сховище 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;
}

Якщо виявлено, що перевірка navigator.userAgentне завжди є надійною. Більшої надійності можна досягти, також перевіривши navigator.platform. Проста модифікація попередньої відповіді, здається, працює краще:

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

Раджу перевірити 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();
}

Це те, що ви шукаєте.

Відмова: Я працюю в компанії, яка пропонує цю безкоштовну послугу.

Перегляньте цю публікацію , вона дає дійсно приємний фрагмент коду, що робити при виявленні сенсорних пристроїв або що робити, якщо викликається подія 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();
}

Ось функція, яку ви можете використовувати, щоб отримати правдиву / хибну відповідь щодо того, чи працює ви в мобільному браузері. Так, це нюхає браузер, але іноді саме це потрібно.

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;
}

Усі відповіді використовують користувальницький агент для виявлення браузера, але виявлення пристрою на основі користувача-агента не дуже вдале рішення, краще - виявити такі функції, як сенсорний пристрій (у новому jQuery вони видаляють $.browserі використовують $.supportзамість цього).

Щоб виявити мобільний телефон, ви можете перевірити наявність подій на дотик:

function is_touch_device() {
  return 'ontouchstart' in window // works on most browsers 
      || 'onmsgesturechange' in window; // works on ie10
}

Взято з найкращого способу виявлення "сенсорного екрана" пристрою за допомогою JavaScript?

Я б пропонував скористатися наступним комбінованим рядком, щоб перевірити, чи використовується тип пристрою.

Відповідно до рядка документації MozillaMobi рекомендується. Але деякі з старих планшетів не повертаються як істинні, якщо лише Mobiвикористовуються, отже, і ми повинні використовувати Tabletрядок.

Так само для того, щоб бути на безпечній стороні, iPadа також iPhoneрядки можуть використовуватися для перевірки типу пристрою.

Більшість нових пристроїв повертаються лише trueдля Mobiрядка.

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}

Ви можете використовувати медіа-запит, щоб легко обробити його.

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}

Чудова відповідь, дякую. Невелике вдосконалення для підтримки Windows-телефону та Zune:

if (navigator.userAgent.match(/Android/i) ||
  navigator.userAgent.match(/webOS/i) ||
  navigator.userAgent.match(/iPhone/i) ||
  navigator.userAgent.match(/iPad/i) ||
  navigator.userAgent.match(/iPod/i) ||
  navigator.userAgent.match(/BlackBerry/) ||
  navigator.userAgent.match(/Windows Phone/i) ||
  navigator.userAgent.match(/ZuneWP7/i)
) {
  // some code
  self.location = "top.htm";
}

Використовуй це:

/**  * jQuery.browser.mobile (http://detectmobilebrowser.com/)  * jQuery.browser.mobile will be true if the browser is a mobile device  **/ (function(a){jQuery.browser.mobile=/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/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|e\-|e\/|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|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|xda(\-|2|g)|yas\-|your|zeto|zte\-/i.test(a.substr(0,4))})(navigator.userAgent||navigator.vendor||window.opera);

Потім скористайтеся цим:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Проста функція, заснована на http://detectmobilebrowser.com/

function isMobile() {
    var a = navigator.userAgent||navigator.vendor||window.opera;
    return /(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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(a)||/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(a.substr(0,4));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Якщо ви перейдете до будь-якого веб-переглядача і якщо ви спробуєте отримати navigator.userAgent, ми отримаємо інформацію про браузер приблизно так, як

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, як і Gecko) Chrome / 64.0.3282.186 Safari / 537.36

Те саме, якщо ви робите мобільний телефон, ви отримаєте наступні

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, як і Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

У кожному мобільному браузері буде використаний реагент із рядком, що містить "Мобільний". Тому я використовую вище фрагмент у своєму коді, щоб перевірити, чи є поточний агент користувача веб / мобільний. На основі результату я буду вносити необхідні зміни.

Я цим користуюся

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}

Як щодо mobiledetect.net ?

Інші рішення здаються занадто елементарними. Це легкий клас PHP. Він використовує рядок User-Agent у поєднанні з конкретними заголовками HTTP для виявлення мобільного середовища. Ви також можете скористатися програмою Mobile Detect, використовуючи будь-який із плагінів третьої сторони, доступних для: WordPress, Drupal, Joomla, Magento тощо.

Не можна довіряти рядкам користувацького агента самостійно. Рішення нижче буде працювати у будь-яких ситуаціях.

function isMobile(a) {
  return (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|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|xda|xiino/i.test(a) || /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(a.substr(0, 4)));
}

і викликайте цю функцію:

isMobile(navigator.userAgent || navigator.vendor || window.opera)