javascript определение js - Каков наилучший способ обнаружения мобильного устройства в jQuery?





15 Answers

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

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

    if (isMobile.matches) {
        //Conditional script here
    }
 });

Поддержка браузера: http://caniuse.com/#feat=matchmedia

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

is mobile detect

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

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




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

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

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

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



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

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

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

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

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




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



Если вы используете Modernizr , очень легко использовать Modernizr.touch как упоминалось ранее.

Тем не менее, я предпочитаю использовать комбинацию тестов Modernizr.touch и User Agent, чтобы быть в безопасности.

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




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




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



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



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

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



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

В соответствии с версией документации Mozilla рекомендуется Mobi . Но некоторые из старых таблиц не возвращают true, если используется только 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!');
}



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

Чтобы обнаружить мобильный телефон, вы можете проверить события касания:

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

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




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




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

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




Если 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...
}



Related