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

Question

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

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

Answer 1

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

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

Ваш вопрос был

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

Теперь, когда у нас есть информация об устройстве, остается только выражение if:

if(device === "xs"){
  // Enter your script for handheld devices here 
}

Вот пример на CodePen: http://codepen.io/jacob-king/pen/jWEeWG

Answer 2

Нельзя полагаться на 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");
}

Answer 3

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

• Apache
• ASP
• C #
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Python
• Rails

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

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

Answer 4

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

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

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

Answer 5

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

Answer 6

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

Answer 7

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

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

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

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

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

Answer 9

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

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

Answer 10

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