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

Dla mnie małe jest piękne więc 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 strona była "przyjazna dla urządzeń mobilnych". Więc używam CSS Media Queries Pokaż / Ukryj 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. A to nie jest dobre dla odwiedzających mobilnych. Więc, poza ukrywaniem element 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ć go w akcji na http://lisboaautentica.com

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

Update by dekin88

Jest wbudowany JavaScript API do wykrywania nośników. Zamiast używać powyższego rozwiązania po prostu użyj następującego:

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

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

Przeglądarka Podpory: http://caniuse.com/#feat=matchmedia

Zaletą tej metody jest to, że jest ona nie tylko prostsza i krótsza, ale można warunkowo kierować różne urządzenia, takie jak smartfony i Tablety oddzielnie, jeśli to konieczne, bez konieczności dodawania żadnych atrap elementów do DOM.

Zgodnie z Mozilla - wykrywanie przeglądarki za pomocą agenta użytkownika :

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

Tak:

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

To pasuje do wszystkich popularnych agentów użytkowników przeglądarek mobilnych, w tym mobilnych Mozilli, Safari, IE, Opery, Chrome itp.

Aktualizacja dla Androida

EricL zaleca testowanie dla Android jako agenta użytkownika również, jako Chrome ciąg User agent dla tabletów nie zawiera "Mobi" (wersje telefonów jednak tak):

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

Prosty i skuteczny jednowarstwowy:

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

Jednak powyższy kod nie uwzględnia przypadku laptopów z Ekranem dotykowym. Dlatego podaję tę drugą wersję, opartą na @ Julian solution:

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

To, co robisz, chcąc wykryć urządzenie mobilne, jest trochę zbyt bliskie koncepcji "sniffingu przeglądarki" IMO. Prawdopodobnie znacznie lepiej byłoby wykonać detekcję funkcji. Biblioteki jak http://www.modernizr.com może w tym pomóc.

Na przykład, gdzie jest granica między komórką i nie-komórką? Z każdym dniem staje się coraz bardziej zamazany.

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

Dostarcza skrypty do wykrywania przeglądarek mobilnych w kilku językach, z których jednym jest JavaScript. To może Ci pomóc w tym, czego szukasz.

Jednak, ponieważ używasz jQuery, możesz chcieć być świadomy jQuery.kolekcja wsparcia. Jest to zbiór właściwości do wykrywania możliwości bieżącej przeglądarki. Dokumentacja jest tutaj: http://api.jquery.com/jQuery.support/

Ponieważ Nie wiem, co dokładnie próbujesz osiągnąć, Nie wiem, które z nich będzie najbardziej przydatne.

Wszystko, co jest powiedziane, myślę, że najlepszym rozwiązaniem jest albo przekierowanie lub napisać inny skrypt do wyjścia za pomocą języka po stronie serwera (jeśli jest to opcja). Ponieważ tak naprawdę nie znasz możliwości mobilnej przeglądarki x, Robienie wykrywania i logiki zmian po stronie serwera byłoby najbardziej niezawodna metoda. Oczywiście, wszystko to jest kwestią sporną, jeśli nie możesz używać języka po stronie serwera:)

Czasami pożądane jest wiedzieć, jakiego urządzenia używa klient, aby pokazać treści specyficzne dla tego urządzenia, takie jak link do sklepu iPhone lub Android market. 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 z grafiki Maniacs http://graphicmaniacs.com/note/detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php/

Znaleziono 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żna przetestować za pomocą:

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

Jeśli przez "mobile" masz na myśli "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 oknem.ekran.szerokość 320. Na Androidzie skończysz z oknem.szerokość zewnętrzna 480 (choć może zależeć od Androida). iPady i tablety z Androidem zwrócą liczby takie jak 768, aby uzyskać pełny widok, jak chcesz.

Nie można polegać na navigator.userAgent, nie każde urządzenie ujawnia swój prawdziwy system operacyjny. Na przykład w moim HTC zależy to od ustawień ("korzystanie z wersji mobilnej" on / off). On http://my.clockodo.com , po prostu użyliśmy screen.width do wykrywania małych urządzeń. Niestety w niektórych wersjach Androida jest błąd z ekranem.szerokość. 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");
}

Jeśli używasz Modernizr , jest bardzo łatwy w użyciu Modernizr.touch, Jak wspomniano wcześniej.

Jednak dla bezpieczeństwa wolę używać kombinacji Modernizr.touch i testów 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
    }

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

Należy również pamiętać, że testowanie user agent iemobile zapewni szerszy zakres wykrytych urządzeń mobilnych firmy Microsoft niż Windows Phone.

Zobacz też to pytanie

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

CSS używa width (Media Queries), aby określić, które Style zostały zastosowane do dokumentu internetowego na podstawie szerokości. Dlaczego nie użyć width w JavaScript?

Na przykład w zapytaniach Bootstrap (Mobile First) Istnieją 4 punkty przystawki/przerwy:

• dodatkowe małe urządzenia mają 768 pikseli i mniej.
• małe urządzenia wahają się od 768 do 991 pikseli.
[[10]}urządzenia średnie mają zakres od 992 do 1199 pikseli.
• Duże urządzenia mają 1200 pikseli i więcej.

Możemy tego użyć również do rozwiązania naszego problemu z JavaScript.

Najpierw utworzymy funkcję, która pobierze rozmiar okna i zwróci wartość, która pozwoli nam zobaczyć jaki rozmiar urządzenie ogląda naszą aplikację:

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 ustawioną funkcję, możemy ją nazwać ans 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 nam tylko polecenie if:

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

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

W jednym wierszu javascript:

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

Jeśli user agent zawiera 'Mobi' (zgodnie z MDN) i ontouchstart jest dostępny, prawdopodobnie będzie to urządzenie mobilne.

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

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

I jeśli chcesz również wykryć tabletki, po prostu sprawdź O sekcji dla dodatkowych wyrażeń regularnych parametr.

Tablety z Androidem, iPady, Kindle i Playbooki nie są wykrywane przez design. Aby dodać obsługę tabletów, dodaj |android|ipad|playbook|silk do pierwszy regex.

Jeśli nie martwisz się o małe wyświetlacze, możesz użyć detekcji szerokości/wysokości. W ten sposób, jeśli szerokość jest pod pewnym rozmiarem, strona mobilna jest wyrzucana. Może nie jest to idealny sposób, ale prawdopodobnie będzie najłatwiejszy do wykrycia dla wielu urządzeń. Być może trzeba będzie umieścić konkretny dla iPhone 4 (duża rozdzielczość).

Jeśli okaże się, że samo sprawdzanie navigator.userAgent nie zawsze jest wiarygodne. Większą niezawodność można uzyskać również sprawdzając 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...
}

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

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

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

W skrócie, jeśli zaimportujesz mały plik JavaScript:

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

Zostanie Ci obiekt JSON, który wygląda następująco:

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

(Oczywiście zakładając, że używasz Nexusa 7) i będziesz mógł robić takie rzeczy jak:

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

Zastrzeżenie: pracuję dla firmy, która oferuje tę BEZPŁATNĄ usługę.

Możesz użyć zapytania o media, aby móc go ł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ła poprawa 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";
}

Sprawdź ten post , daje naprawdę ładny fragment kodu, co zrobić, gdy urządzenia dotykowe zostaną wykryte lub co zrobić, jeśli wywołane 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, jest to wąchanie przeglądarki, ale czasami jest to dokładnie to, czego 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ą user-agent do wykrywania przeglądarki, ale wykrywanie urządzeń w oparciu o user-agent nie jest zbyt dobrym rozwiązaniem, lepiej jest wykryć funkcje takie jak urządzenie dotykowe (w nowym jQuery usuwają $.browser i używają $.support zamiast).

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ęte 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 dokumentacja Mozilli zalecany jest ciąg znaków Mobi. Ale, niektóre ze starych tabletów nie zwraca true, jeśli tylko Mobi jest używany, dlatego powinniśmy użyć Tablet string zbyt.

Podobnie, dla bycia po bezpiecznej stronie iPad i iPhone łańcuchy mogą być również używane do sprawdzania typu urządzenia.

Większość nowych urządzeń zwróci true dla Mobi string sam.

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

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 jakąś przeglądarkę i jeśli próbujesz uzyskać navigator.userAgent wtedy będziemy dostawać informacje o przeglądarce coś jak po

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

To samo, jeśli zrobisz w mobile będziesz otrzymywać następujące

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

Każda przeglądarka mobilna będzie miała useragent z ciągiem zawierającym "Mobile" więc używam powyższego fragmentu w moim kodzie, aby sprawdzić, czy aktualnym agentem użytkownika jest web/mobile. W oparciu o wynik będę robił wymagane zmiany.

Używam tego

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

A może mobiledetect.net?

Inne rozwiązania wydają się zbyt proste. Jest to lekka Klasa PHP. Wykorzystuje ciąg User-Agent połączony z konkretnymi nagłówkami HTTP do wykrywania środowiska mobilnego. Możesz również skorzystać z Mobile Detect za pomocą dowolnej z wtyczek innych firm dostępnych dla: WordPress, Drupal, Joomla, Magento itp.

To jest mój kod, którego używam w moich projektach:

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