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

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

В файле 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)").matches;

    if (isMobile) {
        //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 solution:

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

И затем, чтобы проверить, есть ли его Mobile, вы можете протестировать, используя:

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 и тестирования агента пользователя, чтобы быть в безопасности.

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) существует 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
• С#
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• питон
• Рельсы

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

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

Вы не можете полагаться на 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");
}

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

Здесь хорошо для некоторых языков: http://detectmobilebrowsers.com/

Советую вам проверить 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();
}

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

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

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

Зная, что TouchEvent предназначен только для мобильных устройств, возможно, самый простой способ - проверить, поддерживает ли его пользовательское устройство:

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

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

В соответствии с версией документации Mozilla рекомендуется Mobi. Но некоторые из старых таблиц не возвращают true, если используется только Mobi, поэтому мы также должны использовать строку Tablet.

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

Большинство новых устройств вернутся к true для одной строки Mobi.

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

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

$(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?

Простая функция на основе 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));
}

Используйте это:

/**  * 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!');
}

Огромное спасибо. Небольшое улучшение для поддержки телефона 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";
               }

Вы можете использовать мультимедийный запрос, чтобы иметь возможность легко обрабатывать его.

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

<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

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

Строки агента пользователя не должны быть доверены в одиночку. Решение ниже будет работать во всех ситуациях.

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)

Как насчет mobiledetect.net?

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

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

function isMobile() {
 try {
    if(/Android|webOS|iPhone|iPad|iPod|pocket|psp|kindle|avantgo|blazer|midori|Tablet|Palm|maemo|plucker|phone|BlackBerry|symbian|IEMobile|mobile|ZuneWP7|Windows Phone|Opera Mini/i.test(navigator.userAgent)) {
     return true;
    };
    return false;
 } catch(e){ console.log("Error in isMobile"); return false; }
}

Вы также можете обнаружить это как ниже

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("android") > -1 && !(ua.indexOf("mobile"));
};

Если обнаружено, что просто проверка 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...
}

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

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, С#, ColdFusion и многие другие

function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}

Я попробовал некоторые из способов, а затем решил вручную заполнить список и выполнить простую проверку JS. И в конце пользователь должен подтвердить. Потому что некоторые проверки дали ложные положительные или отрицательные.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Теперь, если вы хотите использовать jQuery для установки CSS, вы можете сделать следующее:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

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

И что касается мобильной подвижности, я предлагаю вам подумать о Идеи Йоава Барнеи:

if(typeof window.orientation !== 'undefined'){...}

Также я рекомендую использовать крошечную библиотеку JavaScript Bowser, да нет r. Он основан на navigator.userAgent и довольно хорошо протестирован для всех браузеров, включая iPhone, Android и т.д.

https://github.com/ded/bowser

Вы можете просто сказать:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.android){
  alert('Hello mobile');
}

Вы также можете использовать серверную часть script и установить из него переменные javascript.

Пример в php

загрузите http://code.google.com/p/php-mobile-detect/, а затем установите переменные javascript.

<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>

Я использую этот

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

Вот еще одно предложение, реализованное с использованием чистого JavaScript (es6)

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();

Если мобильным устройством вы понимаете осязаемый, то вы можете определить его, проверив наличие обработчиков touch:

let deviceType = (('ontouchstart' in window)
                 || (navigator.maxTouchPoints > 0)
                 || (navigator.msMaxTouchPoints > 0)
                 ) ? 'touchable' : 'desktop';

Для него не требуется jQuery.

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

function Device_Type() 
{
    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
    {
        if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        {
            Return_Device = 'Tablet';
        }
        else
        {
            Return_Device = 'Mobile';
        }
    }
    else if(/(tablet|ipad|playbook)|(android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    {
        Return_Device = 'Tablet';
    }
    else
    {
        Return_Device = 'Desktop';
    }

    return Return_Device;
}

Вот короткая, простая и эффективная часть кода:

function isMobile() {
  return (/android|blackberry|iemobile|ipad|iphone|ipod|opera mini|webos/i).test(navigator.userAgent);
}

Добавление:

В некоторых версиях iOS 9.x Safari не представляет "iPhone" в navigator.userAgent, но показывает его в navigator.platform.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }

http://www.w3schools.com/jsref/prop_nav_useragent.asp

Отфильтровать имя платформы.

Пример:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


} 

^^

Это, кажется, всеобъемлющее, современное решение:

https://github.com/matthewhudson/device.js

Он обнаруживает несколько платформ, смартфон и планшеты и ориентацию. Он также добавляет классы в тег BODY, поэтому обнаружение происходит только один раз, и вы можете прочитать, на каком устройстве вы работаете, с простой серией функций jQuery hasClass.

Проверьте это...

[ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я не имею никакого отношения к человеку, который его написал.]

var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.android() || this.webOS();
  }
};

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

В зависимости от того, для чего вы хотите обнаружить мобильный телефон (то есть это предложение не подойдет всем), вы можете добиться различий, посмотрев на разницу между миллисекундами onmouseenter-to-onclick, как я описал в этом ответе.

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

function ismobile(){
   if(/android|webos|iphone|ipad|ipod|blackberry|opera mini|Windows Phone|iemobile|WPDesktop|XBLWP7/i.test(navigator.userAgent.toLowerCase())) {
       return true;
   }
   else
    return false;
}

Попробуйте использовать сенсорное событие:

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

Я знаю, что все в мире ответили на это, и он спрашивает о jQuery и JavaScript.... BUTTTTT....

Это то, что я использую (PHP).

@session_start();

if ($_GET['MobileMode'] == 'True') {
    $_SESSION['MobileMode'] = 'True';
} elseif ($_GET['MobileMode'] == 'False') {
    $_SESSION['MobileMode'] = 'False';
} else {
    if ($_SESSION['MobileMode'] == '') {

        $isMobile = (bool)preg_match('#\b(ip(hone|od|ad)|android|opera m(ob|in)i|windows (phone|ce)|blackberry|tablet'.

                '|s(ymbian|eries60|amsung)|p(laybook|alm|rofile/midp|laystation portable)|Android|Mobile|Apple|nokia|fennec|htc[\-_]'.

                '|mobile|up\.browser|[1-4][0-9]{2}x[1-4][0-9]{2})\b#i', $_SERVER['HTTP_USER_AGENT'] );


        if($isMobile) {

            $_SESSION['MobileMode'] = 'True';
        }
    }
}

Вы можете создавать ссылки в своем верхнем или нижнем колонтитуле или где угодно:

if ($_SESSION['MobileMode'] == 'True') {
   echo "<a href='?MobileMode=False'>Switch to Desktop</a>";
} else {
   echo "<a href='?MobileMode=True'>Switch to Mobile</a>";
}

И все течет, как ожидалось.

Используйте этот

if( screen.width <= 480 ) { 
    // is mobile 
}

Я делаю это для своих приложений.NET.

На моей общей _Layout.cshtml я добавляю это.

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

Затем, чтобы проверить на любой странице вашего сайта (jQuery):

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>

Если вы хотите протестировать пользовательский агент, правильным способом является проверка пользовательского агента, то есть test navigator.userAgent.

Если user подделывает это, они не являются предметом беспокойства. Если вы test.isUnix() вам не следует впоследствии беспокоиться, если система является Unix.

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

Если вы хотите предоставить поддержку браузерам Microsoft, вы должны убедиться, что первые несколько символов содержимого включают в себя и тестируют каждую страницу, которую вы пишете.

Итог... Всегда придерживайтесь стандартов. Затем взломайте его, пока он не будет работать в текущей версии IE, и не ожидайте, что он будет выглядеть хорошо. Это то, что делает GitHub, и им просто дали 100 миллионов долларов.