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

1653

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

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

названия
источник
7
Укажите мобильный URL-адрес специально для мобильных устройств. Именно так большинство крупных сайтов обрабатывают мобильные устройства. Смотрите m.google.com .
Meagar
6
JQuery не делает и не может делать все. Он обеспечивает кросс-браузерный обход и манипулирование DOM, простую анимацию и ajax между браузерами, а также создает каркасную структуру для плагинов. Пожалуйста, имейте в виду ограничения jQuery, прежде чем специально запрашивать решение jQuery.
И Цзян
78
Пользовательские агенты постоянно перемещают цели, все, кто читает этот пост, должны быть очень осторожны с прослушиванием пользовательского агента
Роб
46
Что такое «мобильное» устройство? Это устройство поддерживает сенсорный экран (включая ноутбуки Chrome Pixels и ноутбуки с Windows 8 с мышами)? Это устройство с маленьким экраном (а как насчет Retina iPad)? Это устройство с медленным процессором? Или устройство с медленным интернет-соединением? В зависимости от того, что вы хотите сделать, ответ на этот вопрос будет различным. Для целевого разрешения экрана или сенсорного легко. Если вы хотите обслуживать меньший контент или менее интенсивный JS для некоторых устройств, тогда серебряной пули нет. Протестируйте файл window.navigator.connection и вернитесь к (неприятному, плохому, опрометчивому) нюхающему агенту пользователя. Мои 2 цента.
Дэвид Гилбертсон
3
@Cole "Cole9" Джонсон Моя точка зрения точно. «Мобильный», по-видимому, используется в качестве общего термина для сенсорного, медленного процессора, медленной сети и небольшого экрана. Но ни одно из них не является идеальным допущением. Я считаю, что рассмотрение этих вопросов в отдельности приведет к получению лучшего продукта, чем разработка какой-то смутной концепции «мобильного». Поэтому я задаю этот вопрос ОП.
Дэвид Гилбертсон

Ответы:

2028

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


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

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

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

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

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

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


Более полная версия:

var isMobile = false; //initiate as false
// device detection
if(/(android|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;
}
sweets-BlingBling
источник
438
Нюхание агента пользователя - очень дурацкий метод обнаружения, строки агента пользователя - это постоянно движущаяся цель, им нельзя доверять в одиночку. Люди, проголосовавшие за этот пост, должны подумать о том, чтобы узнать больше.
Роб
65
Одна из проблем, связанных с прослушиванием только определенных устройств из пользовательского агента, заключается в том, что вы должны помнить, чтобы обновлять обнаружение при выходе новых устройств. Это не идеальное решение.
ICodeForCoffee
11
Браузер Dolphin на Android не отправляет ни одной из этих строк!
feeela
88
Если ваш пользователь достаточно лукав или разработчики достаточно
глупы
58
Итак, на каком мобильном вы бы рассматривали андроид телевизор с мышью? Насколько мобильным является Windows-ПК, который может работать в двойном режиме (с клавиатурой или с сенсорным экраном)? Если вы делали это до того, как был изобретен iPad, вам нужно было добавить его позже на все ваши сайты. Выходят следующие ОС: Ubuntu Mobile, FirefoxOS, Tizen ....This.Is.A.Bad.Idea.
FrancescoMM
535

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

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

Gonçalo Peres
источник
8
Вам не нужно # some-element НАСТОЯЩИМ В ДОМЕ, чтобы это сработало?
Ример
68
-1 screen.widthСвойство глобальное. Нет необходимости произвольно добавлять элемент в DOM и без необходимости вводить медиазапросы CSS. Плюс, если браузер находится на рабочем столе и пользователь изменяет размер окна, $is_mobileобновление не будет.
Merv
98
Почему бы и нет:if( screen.width <= 480 ) { // is mobile }
Andrewrjones
23
@andrewrjones Retina устройства удваивают widthзначение атрибута IIRC. Таким образом, сетчатка iPhone будет иметь widthот 640и высоты 960в портретном, и widthиз 960и высоты 640в ландшафте.
Коул Джонсон
66
Вы только что заново изобрели window.matchMedia: developer.mozilla.org/en-US/docs/Web/API/Window.matchMedia
Пол Ирландский
236

По словам 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!
}
QuasarDonkey
источник
11
Спасибо за ответ! Я предпочитаю, /Mobi/i.test(navigator.userAgent)однако, так как test () возвращает логическое значение.
Арминросу
5
Как это ни парадоксально, FireFox Mobile на Samsung Galaxy Note 8 не возвращает Mobi, а тест возвращает false.
Эйринн
13
В связанной статье упоминается: Если устройство достаточно велико, чтобы на нем не было пометки «Mobi», вы должны обслуживать свой настольный сайт (который, в любом случае, должен поддерживать сенсорный ввод в любом случае, поскольку все больше настольных компьютеров появляются с сенсорными экранами).
QuasarDonkey
2
Это намного лучше, чем другие предлагаемые решения, это должен быть принятый ответ imo
RNobel
9
Derp. Спасибо. Я не мог редактировать свой предыдущий пост. Вот оно снова:/Mobi/i.test(navigator.userAgent) || /Android/i.test(navigator.userAgent)
EricL
90

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

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

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

function isMobile() {
  try{ document.createEvent("TouchEvent"); return true; }
  catch(e){ return false; }
}
sequielo
источник
29
Как насчет ноутбуков Windows с сенсорным экраном?
Крис Синелли
10
Вторая isMobileфункция, которую вы предоставили, возвращается trueна моем устройстве destop !! (Google Chrome v44.0)
Лука
12
Это скорее метод isTouchSupported, а не мобильное обнаружение.
Barkermn01
3
Не все мобильные телефоны имеют сенсорные экраны.
Андрей
@ LukeP Освежаетесь ли вы при переходе от мобильной эмуляции к настольному компьютеру?
Christian4423
81

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

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

Барт
источник
3
тем не менее, пользователь может захотеть использовать «jquery mobile» для этих устройств, независимо от поддерживаемых функций.
Сирбер
9
Например, у меня проблема с «мобильным» и «немобильным» - это функции опрокидывания, у меня есть JS, настроенный на отключение функций, просто нужно определить
Сэм Суссман
4
Тем не менее, если вы хотите предложить загружаемое приложение для конкретного устройства, это может быть полезно.
Бастес
3
Это зависит от ситуации, я ищу что-то, что скажет мне, находится ли пользователь на мобильном устройстве, чтобы я мог отключить некоторые тяжелые анимации на основе JavaScript. UA sniffing был бы гораздо более уместным, чем попытка «обнаружить» возможности JavaScript в браузере пользователя.
Рик Саггс
9
Мобильное и немобильное - это очень большое различие, просто использовать «обнаружение функций» глупо, когда вы пытаетесь удовлетворить взаимодействие с пользовательским интерфейсом для мобильных устройств и компьютеров. Лично я хотел бы, чтобы существовал простой (и надежный) способ получить ОС, на которой работает текущий браузер
nbsp
66

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

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

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

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

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

Эндер
источник
6
это не поддерживает iPad. Чтобы поддержать iPad, ищите ip (hone | od) и «| ad» - например, ip (hone | od | ad)
Джейсон Рагаса
3
Я только что попробовал javascript с detemobilebrowser.com/, и он НЕ работает на iPad.
Мильче Патерн
3
@MilchePatern это потому, что скрипт неисправен, используйте iPad вместо ipad, тогда он работает, у меня была проблема на моей вкладке Samsung, пришлось использовать Android iso android :)
Coen Damen
13
Там есть версия jQuery, и она отлично работает, но для определения планшета вы должны добавить, |android|ipad|playbook|silkкак описано в разделе about (это
сделано
3
Ну да, планшет не мобильный. Сайт называется dectect для мобильных браузеров.
Феликс Ева
47

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

Это решение от графических маньяков http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

genkilabs
источник
Это прекрасно работает. Мне нужно было отключить функцию jQuery, которая запускается при прокрутке при использовании телефона iPad или Android, и поскольку различные устройства имеют различную ширину экрана, это было простое решение. Благодаря тонну.
Эрик Аллен
Единственная проблема с использованием теста Android состоит в том, что в nook, который использует пользовательский агент Android
MayorMonty
Хороший ответ, который показывает, что мы не должны быть фундаменталистами по обнаружению признаков.
Фернандо
44

Нашел решение в: 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...
}
Габриель
источник
Решение, основанное на пользовательском агенте, работает хорошо, когда вы можете быть уверены, что подстрока напрямую связана с типом устройства. т.е. iPad = iPad. Однако в настоящее время существует так много различных типов устройств (более 25 000), что этот подход недостаточно точен для большинства деловых целей. Я основал проект с открытым исходным кодом 51Degrees.com, чтобы предоставить надежную и надежную альтернативу. Это будет работать на JavaScript, а также на стороне сервера. Вся документация здесь ... 51degrees.com/support/documentation
Джеймс Розуэлл
Я использовал выше также, и это работало хорошо для меня, но теперь это не работает для Android 5.1 и выше, есть ли что-то изменилось в Android 5.1 и выше?
Имран Камер
if (isMobile.Android ()) {document.getElementById ("myAnchor"). setAttribute ("href", " google.com" ); }
Амранур Рахман
25

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

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

Крис Москини
источник
1
почему недостаточно «window.screen.width»? Похоже, вы берете меньшее из 'window.screen.width' или 'window.outerWidth'. Почему вы заботитесь о «externalWidth»? Заранее спасибо за ответ!
user1330974
16

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

Также посмотрите этот ТАК вопрос

оборота PeterPan
источник
И то же самое в Дарт TouchEvent.supported.
Кай Селгрен
('ontouchstart' in window)альтернатива Modernizr.touchтоже hacks.mozilla.org/2013/04/…
JVE999
Я думаю, что Modernizr - отличное решение!
Бобби Рассел
Вы должны действительно использовать RegEx |вместо многих совпадений. Вам также не нужно, toLowerCase()потому что у вас есть iмодификатор. Здесь: var isTouchDevice = Modernizr.touch || /iphone|ipod|ipad|android|iemobile|iphone|ipad|ipod|blackberry|bada/i.test(navigator.userAgent);
oriadam
14

Вы не можете положиться 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");
}
Ben H
источник
8
Многие мобильные телефоны имеют ширину> 1000, особенно в ландшафтном режиме
oriadam
14

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

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

Jacob King
источник
Это сработало лучше для меня. Поскольку я использовал загрузчик для некоторых мобильных страниц пересылки, этот метод хорошо работал для автоматического перенаправления с немобильной пересылки (не начальной загрузки) на страницу начальной загрузки. Совет: я обнаружил одну небольшую проблему в инструментах IE11 F12: у меня была включена эмуляция в F12 Dev Tools для мобильного устройства, и у него были проблемы с определением размера окна. Я изменил его размер ниже точки разрыва xs, но он определял его как md. Как только я отключил эмуляцию телефона и обновил страницу, он правильно определил размер и в своем коде перенаправил на страницу начальной загрузки.
Джефф Мерглер
То есть я долго искал. Спасибо!
Разработчик
2
@JacobKing вы сказали, что Small Devices range from 768 to 991 pixels.это означает, что это должно быть window.innerWidth < 992(991 включено) то же самое, что для 1199 это должно быть <1200 вместо этого
medBouzid
13

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

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

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

Джеймс Вестгейт
источник
1
пришлось /Mobi/.test(navigator.userAgent)... matchне сделал это для меня
BananaAcid
12

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

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

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

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

Максим Лузик
источник
Для меня это сработало, можете ли вы быть более конкретным, какой код вы используете и в чем проблема?
Максим Лузик
эта страница является ответом, все остальные ответы являются копией вставки этой страницы
Рубен Руиз
11

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

MoDFoX
источник
9

Чтобы добавить дополнительный уровень контроля, я использую хранилище 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;
}
dotTutorials
источник
1
Ваше предположение, основанное на localStorage, весьма интересно. Можете ли вы указать диапазон поддерживаемых устройств или браузеров, которые правильно соответствуют вашему сценарию? Я заинтересован в поиске решения этого вопроса, который я задал, и попытка обнаружить браузеры для мобильных планшетов действительно может быть интересным обходным путем
Gruber
9

Если установлено, что просто проверка 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...
}
отметка
источник
5
Произвольное отклонение ответа без оставления комментария не допускается. В лучшем случае это грубо.
Марк
8

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

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

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

Luca Passani
источник
Wurfl не смог обнаружить nexus7 и iPad mini!
Джейкоб
Что-то не так с Nexus 7. Вы уверены, что Nexus не подделывал строку UA в настройках? Что касается iPad mini, да, это очень трудно отличить от другого iPad, но он все еще был признан iPad, верно? Это ты опроверг мой пост?
Лука Пассани
Нет, ipad mini был обнаружен как настольное устройство
Jacob,
7

Прочтите этот пост , он дает действительно хороший фрагмент кода для того, что делать, когда обнаруживаются сенсорные устройства, или что делать, если вызывается событие 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();
}
Сафран Али
источник
'ontouchstart' in document.documentElementэто, вероятно, лучший тест для сенсорной поддержки, чем window.Touch. Более того, используйте Modernizr.js ( modernizr.com ), потому что потратили много времени, пытаясь получить правильное распознавание касания. Вы можете увидеть их код обнаружения прикосновения на сайте modernizr.com/downloads/modernizr.js, если посмотрите код разработки и выполните поиск по запросу "touch".
Робокат
3
Сенсорное обнаружение доставило мне неприятности, потому что некоторые новые ноутбуки с Windows 8 распознаются как сенсорные экраны в Chrome, что приводит к странным результатам.
JWarner
6

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

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;
}
Джонатон Хилл
источник
1
Это не сможет обнаружить многие мобильные браузеры, особенно мобильный Chrome. Он также, вероятно, выйдет из строя на некоторых из: Opera Mobile, Firefox mobile, Opera Mini, различные популярные китайские мобильные браузеры и т. Д. И т. Д.
robocat
Вам не нужно forдля этого! + Вы забыли создать RegExp. Вот более простой:return !!navigator.userAgent.match(new RegExp(agents.join('|'),'i'))
oriadam
6

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

оборота юкуб
источник
4
К сожалению, это ненадежно и в любом случае возвращается trueна настольные ПК с сенсорными экранами. stucox.com/blog/you-cant-detect-a-touchscreen
JustAMartin
1
Не забывайте ноутбуки с сенсорными экранами и полноценным браузером. :-)
Майк Корменди
это может быть не способ проверить, является ли это мобильным устройством или нет, но, как говорится в названии вашей функции, идеально подходит для проверки устройств с сенсорным экраном. +1 от меня ;-)
Катхара
6

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

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

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

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

if (/Mobi|Tablet|iPad|iPhone/.test(navigator.userAgent)) {
    // do something
}
Санджай Джоши
источник
3
Мне пришлось добавить туда «андроид», чтобы начать работать с планшетами. Я должен настроить, но мне нравится подход.
Энди
6

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

isMobile = function(){
    var isMobile = window.matchMedia("only screen and (max-width: 760px)");
    return isMobile.matches ? true : false
}
Vin
источник
Мне нравится такой подход, я поднял window.matchMedia("(pointer:coarse)").matches;с другого ответа.
Джейсон Лидон
6

Отличный ответ, спасибо. Небольшое улучшение для поддержки 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";
}
Victor Juri
источник
Я бы сказал, что это самое простое (возможно, не лучшее) исправление, если вы пытаетесь обрабатывать события наведения / перетаскивания для мобильных устройств. Я использую что-то вроде этого, чтобы создать логическое значение isMobile, которое затем проверяется на каждое событие наведения / наведения мыши. Это мои два цента, в любом случае. Добавление большего количества библиотек js или кода, который требует взаимодействия с пользователем, не имеет для меня особого смысла; поправьте меня, если я ошибаюсь.
MeanMatt
3
Поскольку вы используете регулярные выражения, на самом деле используйте их:if (navigator.userAgent.match(/Android|webOS|iPhone|iPad|etc/)){self.location = "top.htm"}
foobarbecue
5

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

/**  * 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!');
}
NCoder
источник
5

Простая функция на основе 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));
}
lucasls
источник
5
<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 со строкой, содержащей «Mobile», поэтому я использую приведенный выше фрагмент кода в своем коде, чтобы проверить, является ли текущий пользовательский агент веб / мобильным. На основании результата я буду делать необходимые изменения.

Vishnu Prasanth G
источник
4

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

if(navigator.userAgent.search("mobile")>0 ){
         do something here
}
Yene Mulatu
источник
4

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

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

Luca Mori Polpettini
источник
Потому что вопрос, заданный для JQuery?
Craicerjack
3

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

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)
kaxi1993
источник