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

Примечание редактора: метод обнаружения пользовательских агентов не рекомендуется для современных веб-приложений. См. Комментарии под этим ответом для подтверждения этого факта. Предлагается использовать один из других ответов, используя обнаружение функций и / или медиа-запросы.

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

if( /Android|webOS|iPhone|iPad|Mac|Macintosh|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|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

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

$(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. Modernizer великолепен, но показывает вам только возможности браузера, такие как 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, поэтому они будут видеть все, как вы хотите.

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

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

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

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

РЕДАКТИРОВАТЬ: обновляет код регулярного выражения в ответ на отзывы в комментариях. Использование regex/mobi/i i делает его нечувствительным к регистру, а mobi соответствует всем мобильным браузерам. См. https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent/Firefox

Если вы используете 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 использует ширину (запросы мультимедиа), чтобы определить, какие стили применяются к веб-документу на основе ширины. Почему бы не использовать ширину в 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 < / а>

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

• Apache
• ASP
• C#
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Python
• Рельсы

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

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

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

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

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

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

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

Отличный ответ, спасибо. Небольшое улучшение для поддержки Windows Phone и 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
}

Посмотрите этот пост, он дает действительно хороший фрагмент кода что делать при обнаружении сенсорных устройств или что делать при вызове события 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?

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

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

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

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

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

Использовать этот:

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

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

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

<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

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

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

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

Как насчет 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; }
}

Кажется, это комплексное современное решение:

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

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

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

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

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

Мое решение основано на ширине скроллера (существует или нет).

// this function will check the width of scroller
// if scroller width is less than 10px it's mobile device

//function ismob() {
    var dv = document.getElementById('divscr');
    var sp=document.getElementById('res');
    if (dv.offsetWidth - dv.clientWidth < 10) {sp.innerHTML='Is mobile'; //return true; 
    } else {
    sp.innerHTML='It is not mobile'; //return false;
    }
//}

<!-- put hidden div on very begining of page -->
<div id="divscr" style="position:fixed;top:0;left:0;width:50px;height:50px;overflow:hidden;overflow-y:scroll;z-index:-1;visibility:hidden;"></div>
<span id="res"></span>

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

const isMobile = window.matchMedia("only screen and (max-width: 760px)");
if (/Mobi|Tablet|iPad|iPhone/i.test(navigator.userAgent) || isMobile.matches) {
    console.log('is_mobile')
}

Вы также можете использовать скрипт на стороне сервера и установить из него переменные 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>

Я попробовал несколько способов, а затем решил заполнить список вручную и выполните простую проверку 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'){...}

Не следует доверять только строкам пользовательского агента. Приведенное ниже решение будет работать во всех ситуациях.

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)

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

$.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"));
};

Также я рекомендую использовать крошечную библиотеку 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');
}

Добавление:

В некоторых версиях 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);
    }

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

Я использую это решение, и оно отлично работает на всех устройствах:

if (typeof window.orientation !== "undefined" || navigator.userAgent.indexOf('IEMobile') !== -1) {
   //is_mobile
}

Вы могли бы сделать простую вещь очень просто вот так

(window.screen.width < 700) {
    //The device is a Mobile
} else {
    //The device is a Desktop
}

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

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

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

Фильтр по названию платформы.

Ex:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

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


} 

^^

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

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

jQuery для этого не нужен.

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

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

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

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

detectDeviceType();

Использовал ранее упомянутый sequielo решение и добавлена ​​функция проверки ширины / высоты (чтобы избежать ошибки поворота экрана). Для выбора минимальных / максимальных границ для мобильного окна просмотра я использую этот ресурс https://www.mydevice.io/#compare-devices

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

function deviceType() {
    var width = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var height = Math.max(document.documentElement.clientHeight, window.innerHeight || 0),screenType;
    if (isMobile()){
        if ((width <= 650 && height <= 900) || (width <= 900 && height <= 650))
            screenType = "Mobile Phone";
        else
            screenType = "Tablet";
    }
    else
        screenType = "Desktop";
  return screenType;
}

Решение ES6, использующее несколько методов обнаружения в try/catch блоке

Эта функция состоит из создания TouchEvent, поиска поддержки для события ontouchstart или даже выполнения запроса к объекту mediaQueryList.

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

У меня нет тестов использования, и во многих случаях он может не работать, а также указывать на ложные срабатывания.

Его не следует использовать для какой-либо реальной проверки, но в общем объеме для анализа и статистики, когда объем данных может «простить» неточность, он все же может быть полезен.

const isMobile = ((dc, wd) => {
    // get browser "User-Agent" or vendor ... see "opera" property in `window`
    let ua = wd.userAgent || wd.navigator.vendor || wd.opera;
    try {
        /**
         * Creating a touch event ... in modern browsers with touch screens or emulators (but not mobile) does not cause errors.
         * Otherwise, it will create a `DOMException` instance
         */
        dc.createEvent("TouchEvent");

        // check touchStart event
        (('ontouchstart' in wd) || ('ontouchstart' in dc.documentElement) || wd.DocumentTouch && wd.document instanceof DocumentTouch || wd.navigator.maxTouchPoints || wd.navigator.msMaxTouchPoints) ? void(0) : new Error('failed check "ontouchstart" event');

        // check `mediaQueryList` ... pass as modern browsers
        let mQ = wd.matchMedia && matchMedia("(pointer: coarse)");
        // if no have, throw error to use "User-Agent" sniffing test
        if ( !mQ || mQ.media !== "(pointer: coarse)" || !mQ.matches ) {
            throw new Error('failed test `mediaQueryList`');
        }

        // if there are no failures the possibility of the device being mobile is great (but not guaranteed)
        return true;
    } catch(ex) {
        // fall back to User-Agent sniffing
        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(ua) || /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(ua.substr(0,4));
    }
})(document, window);


// to show result
let container = document.getElementById('result');

container.textContent = isMobile ? 'Yes, your device appears to be mobile' : 'No, your device does not appear to be mobile';

<p id="result"></p>

Регулярное выражение, используемое для тестирования пользовательского агента, немного устарело и было доступно на веб-сайте http://mobiledetect.com, который больше не работает.

Может быть, есть образец получше, но я не знаю.

Шрифты:

• TouchEvent: https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
• ontouchstart: https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/ontouchstart
• mediaQueryList: https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList

PS:

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

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

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

Ты слишком много работаешь.

if (window.screen.availWidth <= 425) {
   // do something
}

Вы можете сделать это при загрузке страницы через JS. Не нужно писать длинные списки строк, чтобы все уловить. Упс, вы пропустили один! Затем вам нужно вернуться и изменить / добавить. Наиболее популярные размеры телефонов составляют около 425 в ширину или меньше (в портретном режиме), планшеты - около 700, а все, что больше, - это ноутбук, настольный компьютер или другое более крупное устройство. Если вам нужен мобильный ландшафтный режим, возможно, вам стоит работать в Swift или Android studio, а не в традиционном веб-кодировании.

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

Вот что я делаю:

function checkMobile() {
  var os = GetOS();
  if (os == "Android OS" || os == "iOS") {
     // do what you wanna do
     return true
  }
}

и для перенаправления я добавляю location.href = mobile.website.com, а затем добавляю этот тег тела

<body onload="checkMobile()"></body>

Решение IE10 + просто с использованием matchMedia:

const isMobile = () => window.matchMedia('(max-width: 700px)').matches

isMobile() возвращает логическое значение

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

На моей общей _Layout.cshtml странице я добавляю это.

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

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

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

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

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

const isMobile = () =>
  /(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([46])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([ev])w|bumb|bw-([nu])|c55\/|capi|ccwa|cdm-|cell|chtm|cldc|cmd-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc-s|devi|dica|dmob|do([cp])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-([mpt])|hei-|hi(pt|ta)|hp( i|ip)|hs-c|ht(c([- _agpst])|tp)|hu(aw|tc)|i-(20|go|ma)|i230|iac([ \-/])|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja([tv])a|jbro|jemu|jigs|kddi|keji|kgt([ /])|klon|kpt |kwc-|kyo([ck])|le(no|xi)|lg( g|\/([klu])|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([- ov])|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30([02])|n50([025])|n7(0([01])|10)|ne(([cm])-|on|tf|wf|wg|wt)|nok([6i])|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan([adt])|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([-01])|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([im])|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)
  );

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

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

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

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

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

Использовать этот

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

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

Почему 480, bcs - вот что выглядит правильно, судя по информации, которую я нашел по размерам телефона.

if(document.body.clientWidth < 480 || document.body.clientHeight < 480) {
  //this is a mobile device
}