it-swarm.com.ru

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

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

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

1453
superUntitled

Вместо использования 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;
}
1838
sweets-BlingBling

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

В файле 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.

450
Gonçalo Peres

Согласно 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!
}
202
QuasarDonkey

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

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

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

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

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

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

77
Bart

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

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

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

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

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

62
Ender

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

46
genkilabs

Нашел решение в: 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...
}
42
Gabriel

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

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, поэтому они получат полный обзор, как вы хотите.

22
Chris Moschini

Если вы используете 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 вопрос

15
Peter-Pan

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

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

13
Jacob King

Вы не можете полагаться на navigator.userAgent, не каждое устройство показывает свою настоящую ОС. На моем HTC, например, это зависит от настроек («использование мобильной версии» вкл./Выкл.) On 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");
}
11
Ben H

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

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

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

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

11
Maksim Luzik

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

11
MoDFoX

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

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

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

11
James Westgate

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

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

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

7
Luca Passani

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

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

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;
}
6
Jonathon Hill

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

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

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

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

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

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

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

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

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

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

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

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

Для обнаружения мобильного телефона вы можете проверить сенсорные события:

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

Взято из Какой лучший способ обнаружить устройство с «сенсорным экраном» с помощью JavaScript?

5
jcubic

Отличный ответ, спасибо. Небольшое улучшение для поддержки 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";
               }
4
Victor Juri
<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 Мобильный Safari/537.36

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

3
Vishnu Prasanth G

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

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

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

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

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)
3
kaxi1993

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

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

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

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

3
Luca Mori Polpettini

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

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

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

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

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

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

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

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

2
Akshay Khale

Также я рекомендую использовать крошечную библиотеку JavaScript Bowser, да нет. Он основан на 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');
}
2
arikan
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()
}
2
mohamed-ibrahim

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

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

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

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

1
Fran

Добавление:

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

Это комплексное современное решение:

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

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

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

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

1
Paolo Mioni

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

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

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

1
Daniel Kucal

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

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;
}
1
Mohamad Hamouday

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

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

Пример:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

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


} 

^^

1

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

0
WoodrowShigeru

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

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

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

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

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

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

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

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