Jaki jest najlepszy sposób na wykrycie urządzenia mobilnego?

Czy istnieje solidny sposób na wykrycie, czy użytkownik korzysta z urządzenia mobilnego w jQuery? Coś podobnego do atrybutu @media CSS? Chciałbym uruchomić inny skrypt, jeśli przeglądarka jest na urządzeniu przenośnym.

Funkcja jQuery $.browsernie jest tym, czego szukam.

Uwaga edytora: wykrywanie agenta użytkownika nie jest zalecaną techniką dla nowoczesnych aplikacji internetowych. Zobacz komentarze poniżej tej odpowiedzi, aby potwierdzić ten fakt. Zaleca się użycie jednej z pozostałych odpowiedzi przy użyciu funkcji wykrywania i / lub zapytań o media.

Zamiast używać jQuery, możesz użyć prostego JavaScript do jego wykrycia:

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

Lub możesz połączyć je oba, aby uczynić go bardziej dostępnym poprzez jQuery ...

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

Teraz $.browserwróci "device"dla wszystkich powyższych urządzeń

Uwaga: $.browserusunięto w jQuery v1.9.1 . Możesz jednak użyć tego przy użyciu kodu wtyczki migracji jQuery

Bardziej dokładna wersja:

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

Dla mnie małe jest piękne, dlatego używam tej techniki:

W pliku CSS:

/* Smartphones ----------- */
@media only screen and (max-width: 760px) {
  #some-element { display: none; }
}

W pliku 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
    }
 });

Moim celem było, aby moja witryna była „przyjazna dla urządzeń mobilnych”. Używam więc CSS Media Queries, aby wyświetlać / ukrywać elementy w zależności od rozmiaru ekranu.

Na przykład w mojej wersji mobilnej nie chcę aktywować Facebook Like Box, ponieważ ładuje wszystkie te zdjęcia profilowe i takie tam. I to nie jest dobre dla użytkowników mobilnych. Oprócz ukrywania elementu kontenera robię to również wewnątrz bloku kodu jQuery (powyżej):

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

Możesz zobaczyć to w akcji na http://lisboaautentica.com

Nadal pracuję nad wersją mobilną, więc pisząc to nadal nie wygląda tak, jak powinna.

Aktualizacja przez dekin88

Wbudowany jest JavaScript API do wykrywania mediów. Zamiast korzystać z powyższego rozwiązania, skorzystaj z następujących opcji:

$(function() {      
    let isMobile = window.matchMedia("only screen and (max-width: 760px)").matches;

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

Obsługuje przeglądarkę: http://caniuse.com/#feat=matchmedia

Zaletą tej metody jest to, że jest ona nie tylko prostsza i krótsza, ale w razie potrzeby można warunkowo kierować różne urządzenia, takie jak smartfony i tablety, bez konieczności dodawania żadnych elementów zastępczych do DOM.

Według Mozilli - wykrywanie przeglądarki przy użyciu klienta użytkownika :

Podsumowując, zalecamy wyszukanie ciągu „Mobi” w dowolnym miejscu w User Agent, aby wykryć urządzenie mobilne.

Lubię to:

if (/Mobi/.test(navigator.userAgent)) {
    // mobile!
}

Będzie to pasować do wszystkich popularnych przeglądarek mobilnych, w tym Mozilla, Safari, IE, Opera, Chrome itp.

Aktualizacja dla Androida

EricL zaleca testowanie również Androidjako agent użytkownika, ponieważ ciąg znaków agenta użytkownika Chrome na tablety nie zawiera „Mobi” (jednak wersje na telefony):

if (/Mobi|Android/i.test(navigator.userAgent)) {
    // mobile!
}

Prosty i skuteczny jednowarstwowy:

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

Powyższy kod nie uwzględnia jednak przypadku laptopów z ekranem dotykowym. Dlatego udostępniam drugą wersję opartą na rozwiązaniu @Julian :

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

To, co robisz, chcąc wykryć urządzenie mobilne, staje się trochę zbyt zbliżone do koncepcji IMO „wąchania przeglądarki”. Prawdopodobnie znacznie lepiej byłoby przeprowadzić wykrywanie niektórych funkcji. Biblioteki takie jak http://www.modernizr.com/ mogą w tym pomóc.

Na przykład, gdzie jest granica między telefonem komórkowym a telefonem komórkowym? Z każdym dniem robi się coraz bardziej rozmazany.

To nie jest jQuery, ale znalazłem to: http://detectmobilebrowser.com/

Udostępnia skrypty wykrywające przeglądarki mobilne w kilku językach, z których jednym jest JavaScript. To może ci pomóc w tym, czego szukasz.

Ponieważ jednak używasz jQuery, możesz chcieć wiedzieć o kolekcji jQuery.support. Jest to zbiór właściwości do wykrywania możliwości bieżącej przeglądarki. Dokumentacja znajduje się tutaj: http://api.jquery.com/jQuery.support/

Ponieważ nie wiem, co dokładnie starasz się osiągnąć, nie wiem, które z nich będą najbardziej przydatne.

Biorąc to wszystko pod uwagę, myślę, że najlepszym rozwiązaniem jest przekierowanie lub napisanie innego skryptu na wyjściu przy użyciu języka po stronie serwera (jeśli jest to opcja). Ponieważ tak naprawdę nie znasz możliwości mobilnej przeglądarki x, wykrywanie i modyfikowanie logiki po stronie serwera byłoby najbardziej niezawodną metodą. Oczywiście to wszystko jest kwestią sporną, jeśli nie możesz używać języka po stronie serwera :)

Czasami pożądane jest, aby wiedzieć, jakiego urządzenia marki używa klient, aby wyświetlać treści specyficzne dla tego urządzenia, takie jak link do sklepu iPhone lub sklepu z Androidem. Modernizer jest świetny, ale pokazuje tylko możliwości przeglądarki, takie jak HTML5 lub Flash.

Oto moje rozwiązanie UserAgent w jQuery, aby wyświetlić inną klasę dla każdego typu urządzenia:

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

To rozwiązanie pochodzi od Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Znaleźć rozwiązanie w: 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());
    }
};

A następnie, aby sprawdzić, czy jest to telefon komórkowy, możesz przetestować za pomocą:

if(isMobile.any()) {
   //some code...
}

Jeśli przez „mobilny” rozumiesz „mały ekran”, używam tego:

var windowWidth = window.screen.width < window.outerWidth ?
                  window.screen.width : window.outerWidth;
var mobile = windowWidth < 500;

Na iPhonie skończysz z Window.screen.width 320. Na Androidzie skończysz z window.outerWidth 480 (choć może to zależeć od Androida). iPad i tablet z Androidem zwrócą liczby takie jak 768, aby uzyskać pełny widok, jak chcesz.

Jeśli korzystasz z Modernizr , jest bardzo łatwy w użyciu, Modernizr.touchjak wspomniano wcześniej.

Jednak wolę używać kombinacji Modernizr.touchtestów użytkownika i użytkownika, dla bezpieczeństwa.

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
    }

Jeśli nie korzystasz z Modernizr, możesz po prostu zastąpić Modernizr.touchpowyższą funkcję('ontouchstart' in document.documentElement)

Należy również pamiętać, że testowanie agenta użytkownika iemobilezapewni szerszy zakres wykrytych urządzeń mobilnych Microsoft niż Windows Phone.

Zobacz także to SO pytanie

Nie możesz polegać navigator.userAgent, nie każde urządzenie ujawnia swój prawdziwy system operacyjny. Na przykład w moim HTC zależy to od ustawień (włączanie / wyłączanie „korzystania z wersji mobilnej”). Na stronie http://my.clockodo.com po prostu screen.widthwykrywaliśmy małe urządzenia. Niestety w niektórych wersjach Androida występuje błąd dotyczący screen.width. Możesz połączyć w ten sposób z 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");
}

Wiem, że to pytanie ma wiele odpowiedzi, ale z tego, co widziałem, nikt nie podchodzi do odpowiedzi tak, jak bym to rozwiązał.

CSS wykorzystuje szerokość (Zapytania o media), aby określić, które style zastosowane do dokumentu internetowego są oparte na szerokości. Dlaczego nie użyć szerokości w JavaScript?

Na przykład w zapytaniach dotyczących multimediów Bootstrap (Mobile First) istnieją 4 punkty przyciągania / przerwania:

• Bardzo małe urządzenia mają 768 pikseli i mniej.
• Małe urządzenia mają zakres od 768 do 991 pikseli.
• Średnie urządzenia mają zakres od 992 do 1199 pikseli.
• Duże urządzenia mają rozdzielczość 1200 pikseli i więcej.

Możemy to wykorzystać również do rozwiązania naszego problemu z JavaScriptem.

Najpierw stworzymy funkcję, która pobiera rozmiar okna i zwraca wartość, która pozwala nam zobaczyć, jaki rozmiar urządzenia przegląda nasza aplikacja:

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

Teraz, gdy mamy skonfigurowaną funkcję, możemy ją nazwać i zapisać wartość:

var device = getBrowserWidth();

Twoje pytanie brzmiało:

Chciałbym uruchomić inny skrypt, jeśli przeglądarka jest na urządzeniu przenośnym.

Teraz, gdy mamy informacje o urządzeniu, pozostaje tylko instrukcja if:

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

Oto przykład na CodePen: http://codepen.io/jacob-king/pen/jWEeWG

W jednej linii javascript:

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

Jeśli klient użytkownika zawiera „Mobi” (zgodnie z MDN) i dostępny jest program ontouchstart, prawdopodobnie jest to urządzenie mobilne.

Dziwi mnie, że nikt nie wskazał miłej strony: http://detectmobilebrowsers.com/ Ma gotowy kod w różnych językach do wykrywania urządzeń mobilnych (w tym między innymi):

• Apacz
• ŻMIJA
• DO#
• IIS
• JavaScript
• NGINX
• PHP
• Perl
• Pyton
• Szyny

Jeśli chcesz również wykryć tablety, po prostu sprawdź sekcję O mnie, aby uzyskać dodatkowy parametr RegEx.

Tablety z Androidem, iPady, Kindle Fires i PlayBooks nie są wykrywane z założenia. Aby dodać obsługę tabletów, dodaj |android|ipad|playbook|silkdo pierwszego wyrażenia regularnego.

Jeśli nie martwisz się szczególnie o małe wyświetlacze, możesz użyć funkcji wykrywania szerokości / wysokości. W ten sposób, jeśli szerokość jest poniżej określonego rozmiaru, witryna mobilna jest wyświetlana. To może nie być idealny sposób, ale prawdopodobnie będzie najłatwiejszy do wykrycia dla wielu urządzeń. Może być konieczne włożenie określonego dla iPhone'a 4 (duża rozdzielczość).

Aby dodać dodatkową warstwę kontroli, używam pamięci HTML5, aby wykryć, czy używa ona pamięci mobilnej czy stacjonarnej. Jeśli przeglądarka nie obsługuje pamięci, mam tablicę mobilnych nazw przeglądarek i porównuję agenta użytkownika z przeglądarkami w tablicy.

To jest dość proste. Oto funkcja:

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

Jeśli okaże się, że samo sprawdzenie navigator.userAgentnie zawsze jest niezawodne. Większa niezawodność może zostać osiągnięta również poprzez sprawdzenie navigator.platform. Prosta modyfikacja poprzedniej odpowiedzi wydaje się działać lepiej:

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

Radzę sprawdzić http://wurfl.io/

Krótko mówiąc, jeśli importujesz mały plik JavaScript:

<script type='text/javascript' src="//wurfl.io/wurfl.js"></script>

Pozostanie ci obiekt JSON, który wygląda następująco:

{
 "complete_device_name":"Google Nexus 7",
 "is_mobile":true,
 "form_factor":"Tablet"
}

(Zakładając, że używasz Nexusa 7, oczywiście) i będziesz w stanie robić takie rzeczy jak:

if(WURFL.is_mobile) {
    //dostuff();
}

Tego właśnie szukasz.

Oświadczenie: Pracuję dla firmy, która oferuje tę bezpłatną usługę.

Sprawdź ten post , daje naprawdę fajny fragment kodu dotyczący tego, co zrobić, gdy wykryte zostaną urządzenia dotykowe lub co zrobić, gdy wywoływane jest zdarzenie 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();
}

Oto funkcja, której możesz użyć, aby uzyskać prawdziwą / fałszywą odpowiedź na pytanie, czy korzystasz z przeglądarki mobilnej. Tak, to wąchanie przeglądarki, ale czasami właśnie tego potrzebujesz.

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

Wszystkie odpowiedzi używają klienta użytkownika do wykrywania przeglądarki, ale wykrywanie urządzeń na podstawie klienta użytkownika nie jest bardzo dobrym rozwiązaniem, lepiej jest wykrywać funkcje takie jak urządzenie dotykowe (w nowym jQuery zamiast tego usuwają $.browseri używają $.support).

Aby wykryć telefon komórkowy, możesz sprawdzić zdarzenia dotykowe:

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

Zaczerpnięty z Jaki jest najlepszy sposób na wykrycie urządzenia z ekranem dotykowym za pomocą JavaScript?

Sugerowałbym użycie następującej kombinacji ciągów, aby sprawdzić, czy używany jest typ urządzenia.

Zgodnie z dokumentacją Mozilli ciąg znaków Mobijest zalecany. Ale niektóre ze starych tabletów nie zwracają wartości true, jeśli tylko Mobizostaną użyte, dlatego też powinniśmy użyć Tabletłańcucha.

Podobnie, za to, że na wszelki wypadek iPadi iPhonestrun może być również używany do sprawdzenia typu urządzenia.

Większość nowych urządzeń wróci truedo Mobiłańcucha samodzielnie.

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

Możesz użyć kwerendy medialnej, aby móc ją łatwo obsłużyć.

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

Świetna odpowiedź dzięki. Małe ulepszenie do obsługi Windows Phone i 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";
}

Użyj tego:

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

Następnie użyj tego:

if(jQuery.browser.mobile)
{
   console.log('You are using a mobile device!');
}
else
{
   console.log('You are not using a mobile device!');
}

Prosta funkcja oparta na 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));
}

<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Jeśli masz dowolną przeglądarkę i próbujesz uzyskać plik navigator.userAgent, otrzymamy informacje o przeglądarce podobne do następujących

Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_13_1) AppleWebKit / 537.36 (KHTML, jak Gecko) Chrome / 64.0.3282.186 Safari / 537.36

To samo, jeśli robisz w telefonie komórkowym, będziesz obserwować

Mozilla / 5.0 (Linux; Android 8.1.0; Pixel Build / OPP6.171019.012) AppleWebKit / 537.36 (KHTML, jak Gecko) Chrome / 61.0.3163.98 Mobile Safari / 537.36

Każda przeglądarka mobilna będzie miała użytkownika z ciągiem zawierającym „Mobile”. Dlatego używam powyższego fragmentu kodu w celu sprawdzenia, czy bieżący agent użytkownika jest web / mobile. Na podstawie wyniku dokonam wymaganych zmian.

używam tego

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

Co powiesz na mobiledetect.net ?

Inne rozwiązania wydają się zbyt podstawowe. Jest to lekka klasa PHP. Wykorzystuje ciąg User-Agent w połączeniu z określonymi nagłówkami HTTP do wykrywania środowiska mobilnego. Możesz także skorzystać z Mobile Detect, używając dowolnej wtyczki innej firmy dostępnej dla: WordPress, Drupal, Joomla, Magento itp.

Ciągów agenta użytkownika nie należy ufać samemu. Poniższe rozwiązanie będzie działać we wszystkich sytuacjach.

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

i wywołaj tę funkcję:

isMobile(navigator.userAgent || navigator.vendor || window.opera)