it-swarm.dev

Jaký je nejlepší způsob, jak detekovat mobilní zařízení v aplikaci jQuery?

Existuje solidní způsob, jak zjistit, zda uživatel používá mobilní zařízení v aplikaci jQuery? Něco podobné atributu CSS @media? Chtěl bych spustit jiný skript, pokud je prohlížeč v kapesním zařízení.

Funkce jQuery $.browser není to, co hledám.

1453
superUntitled

Namísto použití jQuery jej můžete pomocí jednoduchého JavaScriptu zjistit:

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

Nebo je můžete zkombinovat, aby byla přístupnější prostřednictvím rozhraní jQuery ...

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

Nyní $.browser vrátí "device" pro všechna výše uvedená zařízení

Poznámka: $.browser smazáno na jQuery v1.9.1 . Můžete to však použít pomocí pluginu jQuery migrace Code


Důkladnější verze:

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

Pro mě je malý krásný, takže používám tuto techniku:

V souboru CSS:

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

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

Mým cílem bylo, aby moje stránky byly "mobilní přátelské". Takže používám CSS Media dotazy zobrazovat/skrýt prvky v závislosti na velikosti obrazovky.

Například v mé mobilní verzi nechci aktivovat schránku na Facebooku, protože načte všechny ty profilové obrázky a další. A to není dobré pro mobilní návštěvníky. Kromě skrytí elementu kontejneru to také dělám v bloku kódu jQuery (výše):

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

Můžete si ji prohlédnout v akci http://lisboaautentica.com

Stále pracuji na mobilní verzi, takže to stále ještě nevypadá tak, jak by to mělo být.

Aktualizovat podle dekin88

Pro detekci médií je zabudováno rozhraní JavaScript API. Spíše než použití výše uvedeného řešení jednoduše použijte následující:

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

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

Podpora prohlížeče:http://caniuse.com/#feat=matchmedia

Výhodou této metody je, že je to nejen jednodušší a kratší, ale v případě potřeby můžete podmíněně cílit na různá zařízení, jako jsou smartphony a tablety, aniž byste museli do DOM přidávat jakékoli figuríny.

450
Gonçalo Peres

Podle Mozilla - Detekce prohlížeče pomocí agenta uživatele :

Stručně řečeno, doporučujeme vyhledat řetězec „Mobi“ kdekoli v uživatelském agentu pro detekci mobilního zařízení.

Takhle:

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

To bude odpovídat všem běžným agentům uživatelů mobilního prohlížeče, včetně mobilních Mozilla, Safari, IE, Opery, Chrome atd.

Aktualizace pro Android

EricL doporučuje testovat Android jako uživatelského agenta, stejně jako řetězec uživatelského agenta Chrome pro tablety nezahrnuje "Mobi" (verze telefonu však):

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

Jednoduchá a efektivní vložka:

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

Nicméně výše uvedený kód nebere v úvahu případ pro notebooky s dotykovým displejem. Tedy, poskytuji tuto druhou verzi na základě @Julian řešení :

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

Co děláte tím, že chcete detekovat mobilní zařízení je stále příliš blízko k "prohlížeč čichání" koncept IMO. Pravděpodobně by bylo mnohem lepší provést nějakou funkci detekce. Knihovny jako http://www.modernizr.com/ s tím mohou pomoci.

Kde je například linka mezi mobilním a nemobilním? Každý den je stále více rozmazaný.

77
Bart

Není to jQuery, ale našel jsem toto: http://detectmobilebrowser.com/

Poskytuje skripty pro detekci mobilních prohlížečů v několika jazycích, z nichž jeden je JavaScript. To vám může pomoci s tím, co hledáte.

Jelikož však používáte jQuery, možná budete chtít znát kolekci jQuery.support. Je to kolekce vlastností pro zjišťování možností aktuálního prohlížeče. Dokumentace je zde: http://api.jquery.com/jQuery.support/

Protože nevím, co přesně se snažíte dosáhnout, nevím, který z nich bude nejužitečnější.

Vše, co bylo řečeno, myslím, že nejlepší je buď přesměrovat nebo napsat jiný skript na výstup pomocí jazyka na straně serveru (pokud je to možnost). Protože ve skutečnosti neznáte možnosti mobilního prohlížeče x, provádění detekce a logiky změn na straně serveru by byla nejspolehlivější metodou. Samozřejmě, to vše je bod, pokud nemůžete použít jazyk na straně serveru :)

62
Ender

Někdy je žádoucí vědět, které značkové zařízení klient používá, aby zobrazil obsah specifický pro toto zařízení, jako je odkaz na obchod iPhone nebo na trh Android. Modernizátor je skvělý, ale zobrazuje pouze možnosti prohlížeče, například HTML5 nebo Flash.

Zde je moje řešení UserAgent v jQuery pro zobrazení jiné třídy pro každý typ zařízení:

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

Toto řešení je od Graphics Maniacs http://graphicmaniacs.com/note/detecting-iphone-iPod-ipad-Android-and-blackberry-browser-with-javascript-and-php/

46
genkilabs

Nalezli jsme řešení v: 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 pak si můžete ověřit, zda je mobilní, můžete otestovat pomocí: 

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

Pokud používáte výraz „mobilní“, znamená to „malá obrazovka“, kterou používám:

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

Na iPhone budete skončit s window.screen.width 320. Na Android skončíte s window.outerWidth 480 (ačkoli to může záviset na Android). iPady a tablety Android vrátí čísla jako 768, takže získají úplný náhled, jaký byste chtěli.

22
Chris Moschini

Pokud používáte Modernizr , je velmi snadné použít Modernizr.touch, jak bylo zmíněno dříve.

Nicméně, dávám přednost použití kombinace Modernizr.touch a testování uživatelského agenta, jen aby bylo bezpečné.

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
    }

Pokud nepoužíváte Modernizr, můžete jednoduše nahradit funkci Modernizr.touch výše ('ontouchstart' in document.documentElement)

Všimněte si také, že testování uživatelského agenta iemobile vám poskytne širší rozsah detekovaných mobilních zařízení Microsoft než Windows Phone.

Viz také tato otázka SO

15
Peter-Pan

Vím, že tato otázka má mnoho odpovědí, ale z toho, co jsem viděl, nikdo nepřiblížil odpověď tak, jak bych to vyřešil.

CSS používá šířku (Media Queries) k určení, které styly aplikované na webový dokument založený na šířce. Proč nepoužívat šířku v JavaScriptu?

Například v mediálních dotazech Bootstrap (Mobile First) existují 4 body přerušení/přerušení:

  • Extra malá zařízení jsou 768 pixelů a méně.
  • Malá zařízení se pohybují od 768 do 991 pixelů.
  • Střední zařízení se pohybují od 992 do 1199 pixelů.
  • Velká zařízení jsou 1200 pixelů a vyšší.

Můžeme to také využít k vyřešení našeho JavaScriptu.

Nejprve vytvoříme funkci, která získá velikost okna a vrátí hodnotu, která nám umožní zjistit, jakou velikost zařízení si prohlíží naši aplikaci:

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

Nyní, když máme nastavenou funkci, můžeme ji volat a uložit hodnotu:

var device = getBrowserWidth();

Vaše otázka byla

Chtěl bych spustit jiný skript, pokud je prohlížeč v kapesním zařízení.

Nyní, když máme informace o zařízení, které zůstalo, je příkaz if:

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

Zde je příklad na CodePen: http://codepen.io/jacob-king/pen/jWEeWG

13
Jacob King

Nemůžete spoléhat na navigator.userAgent, ne každé zařízení odhalí svůj skutečný operační systém. Například na mém HTC to závisí na nastavení ("on/off mobilní verze"). Na http://my.clockodo.com , jednoduše jsme použili screen.width pro detekci malých zařízení . Bohužel, v některých verzích Android je chyba s screen.width. Tento způsob můžete zkombinovat s agentem 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");
}
11
Ben H

Překvapuje mě, že nikdo neřekl stránky Nice: http://detectmobilebrowsers.com/ Má hotový kód v různých jazycích pro mobilní detekci (včetně, ale nejen):

  • Apache
  • ASP
  • C#
  • IIS
  • JavaScript
  • NGINX
  • PHP
  • Perl
  • Krajta
  • Kolejnice

A pokud potřebujete tablety také zjistit, stačí zkontrolovat sekci Další pro další parametr RegEx.

Android tablety, iPady, Kindle Fires a PlayBooks nejsou detekovány Designem. Chcete-li přidat podporu pro tablety, přidejte |Android|ipad|playbook|silk do První regex.

11
Maksim Luzik

Pokud se nestaráte o malé displeje, můžete použít detekci šířky/výšky. Tak, že pokud je šířka pod určitou velikostí, je mobilní web vyhozen. Nemusí to být dokonalý způsob, ale pravděpodobně to bude nejjednodušší detekovat pro více zařízení. Možná budete muset umístit konkrétní pro iPhone 4 (velké rozlišení). 

11
MoDFoX

V jednom řádku javascriptu:

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

Pokud uživatelský agent obsahuje 'Mobi' (podle MDN) a ontouchstart je k dispozici, pak je pravděpodobně mobilní zařízení. 

11
James Westgate

Doporučuji se podívat na http://wurfl.io/

Stručně řečeno, pokud importujete malý soubor JavaScriptu:

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

Budete mít objekt JSON, který vypadá takto:

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

(Předpokládá se, že používáte Nexus 7) a budete moci dělat věci jako:

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

To je to, co hledáte.

Disclaimer: Pracuji pro společnost, která nabízí tuto bezplatnou službu.

7
Luca Passani

Chcete-li přidat další vrstvu kontroly, používám úložiště HTML5, abych zjistil, zda používá mobilní úložiště nebo stolní úložiště. Pokud prohlížeč nepodporuje úložiště, mám řadu názvů mobilních prohlížečů a porovnávám uživatele s prohlížeči v poli.

Je to docela jednoduché. Zde je funkce:

// 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;
}
7
Rasmus Søborg

Zde je funkce, kterou můžete použít k získání pravdivé/nepravdivé odpovědi na to, zda používáte mobilní prohlížeč. Ano, je to prohlížeč-čichání, ale někdy je to přesně to, co potřebujete.

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;
}
6
Jonathon Hill

Navrhoval bych použít následující seznam řetězců, abyste zkontrolovali, zda se používá typ zařízení.

Jako dokumentace dokumentace Mozilly se doporučuje řetězec Mobi. Některé staré tablety se však nevrátí, pokud je použito pouze Mobi, proto bychom měli použít také řetězec Tablet.

Podobně pro použití na bezpečné straně mohou být iPad a iPhone řetězce také použity ke kontrole typu zařízení.

Většina nových zařízení by vrátila true pro samotný řetězec Mobi.

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

Podívejte se na tento příspěvek , dává opravdu pěkný zlomek kódu pro to, co dělat, když jsou detekována dotyková zařízení nebo co dělat, když se nazývá událost 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();
}
6
Safran Ali

Vědět, že TouchEvent je pouze pro mobilní zařízení, možná by bylo nejjednodušší zjistit, zda jej může zařízení uživatele podporovat:

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

Jednoduchá funkce založená 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));
}
5
lucasls

Použij toto:

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

Použijte toto:

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

Všechny odpovědi používají user-agent k detekci prohlížeče, ale detekce zařízení založená na uživatelském agentu není příliš dobré řešení, lepší je detekovat funkce jako dotykové zařízení (v novém jQuery odstraňují $.browser a místo toho používají $.support).

Chcete-li detekovat mobilní události, můžete zkontrolovat dotykové události:

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

Převzato z Jaký je nejlepší způsob detekce zařízení s dotykovou obrazovkou pomocí JavaScriptu?

5
jcubic

Skvělá odpověď díky. Malé zlepšení pro podporu telefonu se systémem Windows a 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";
               }
4
Victor Juri
<script>
  function checkIsMobile(){
      if(navigator.userAgent.indexOf("Mobile") > 0){
        return true;
      }else{
        return false;
      }
   }
</script>

Pokud přejdete do libovolného prohlížeče a pokusíte se získat navigator.userAgent, dostaneme informace o prohlížeči, jako je například následující

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

Totéž, pokud to uděláte v mobilu, budete následovat

Mozilla/5.0 (Linux; Android 8.1.0; Pixel Build/OPP6.171019.012) AppleWebKit/537.36 (KHTML, podobně jako Gecko) Chrome/61.0.3163.98 Mobilní Safari/537.36

Každý mobilní prohlížeč bude mít useragent s řetězcem obsahujícím "Mobile" Takže používám výše uvedený úryvek v mém kódu ke kontrole, zda je aktuální uživatelský agent web/mobilní. Na základě výsledku budu provádět požadované změny.

3

Pokud zjistíte, že kontrola navigator.userAgent není vždy spolehlivá. Větší spolehlivosti lze dosáhnout také kontrolou navigator.platform. Zdá se, že jednoduchá změna předchozí odpovědi funguje lépe:

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

Chcete-li s ním snadno pracovat, můžete použít mediální dotaz.

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

Řetězy agenta uživatele by neměly být důvěryhodné. Níže uvedené řešení bude fungovat ve všech situacích.

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

a volání této funkce:

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

Toto je můj kód, který používám ve svých projektech:

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

Co takhle mobiledetect.net ?

Jiná řešení se zdají být příliš základní. Jedná se o lehkou třídu PHP. Používá řetězec User-Agent v kombinaci se specifickými hlavičkami HTTP k detekci mobilního prostředí. Můžete také využít funkci Detekce mobilů pomocí libovolného z 3. zásuvných modulů dostupných pro: WordPress, Drupal, Joomla, Magento atd.

3

Můžete to také zjistit jako níže

$.isIPhone = function(){
    return ((navigator.platform.indexOf("iPhone") != -1) || (navigator.platform.indexOf("iPod") != -1));

};
$.isIPad = function (){
    return (navigator.platform.indexOf("iPad") != -1);
};
$.isAndroidMobile  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("Android") > -1 && ua.indexOf("mobile");
};
$.isAndroidTablet  = function(){
    var ua = navigator.userAgent.toLowerCase();
    return ua.indexOf("Android") > -1 && !(ua.indexOf("mobile"));
};
3
Nur Rony

Můžete také použít skript na straně serveru a nastavit z něj proměnné javascript. 

Příklad v php

stáhnout http://code.google.com/p/php-mobile-detect/ a pak nastavit proměnné javascript. 

<script>
//set defaults
var device_type = 'desktop';
</script>

<?php
require_once( 'Mobile_Detect.php');
$detect = new Mobile_Detect();
?>

<script>
device_type="<?php echo ($detect->isMobile() ? ($detect->isTablet() ? 'tablet' : 'mobile') : 'desktop'); ?>";
alert( device_type);
</script>
2
Pawel Dubiel

Používám to 

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

Snažil jsem se některé ze způsobů a pak jsem se rozhodl vyplnit seznam ručně a udělat jednoduchý JS check. A nakonec musí uživatel potvrdit. Protože některé kontroly dávaly falešně pozitivní nebo negativní.

var isMobile = false;
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini|Opera Mobile|Kindle|Windows Phone|PSP|AvantGo|Atomic Web Browser|Blazer|Chrome Mobile|Dolphin|Dolfin|Doris|GO Browser|Jasmine|MicroB|Mobile Firefox|Mobile Safari|Mobile Silk|Motorola Internet Browser|NetFront|NineSky|Nokia Web Browser|Obigo|Openwave Mobile Browser|Palm Pre web browser|Polaris|PS Vita browser|Puffin|QQbrowser|SEMC Browser|Skyfire|Tear|TeaShark|UC Browser|uZard Web|wOSBrowser|Yandex.Browser mobile/i.test(navigator.userAgent) && confirm('Are you on a mobile device?')) isMobile = true;

Pokud chcete pro nastavení CSS použít jQuery, můžete provést následující:

$(document).ready(function() {
  if (isMobile) $('link[type="text/css"]').attr('href', '/mobile.css');
});

Vzhledem k tomu, že hranice mezi mobilními a pevnými zařízeními se stávají plynulými a mobilní pulty jsou již výkonné, kontrola šířky a potvrzení uživatele bude pravděpodobně nejlepší pro budoucnost (za předpokladu, že šířka bude v některých případech stále důležitá). Vzhledem k tomu, že dotyky jsou již převedeny na myš-up a downs.

A pokud jde o mobilní pohyblivost, navrhuji, abyste přemýšleli o nápadu Yoava Barnea :

if(typeof window.orientation !== 'undefined'){...}
2
Albert

Checkout http://detectmobilebrowsers.com/ který poskytuje skript pro detekci mobilního zařízení v různých jazycích včetně

JavaScript, jQuery, PHP, JSP, Perl, Python, ASP, C #, ColdFusion a mnoho dalších

2
Akshay Khale

Také doporučuji používat malou JavaScript knihovnu Bowser, ano ne r. Je založen na navigator.userAgent a docela dobře testován pro všechny prohlížeče včetně iPhone, Androidu atd.

https://github.com/ded/bowser

Můžete použít jednoduše říci:

if (bowser.msie && bowser.version <= 6) {
  alert('Hello China');
} else if (bowser.firefox){
  alert('Hello Foxy');
} else if (bowser.chrome){
  alert('Hello Silicon Valley');
} else if (bowser.safari){
  alert('Hello Apple Fan');
} else if(bowser.iphone || bowser.Android){
  alert('Hello mobile');
}
2
arikan
function isDeviceMobile(){
 var isMobile = {
  Android: function() {
      return navigator.userAgent.match(/Android/i) && navigator.userAgent.match(/mobile|Mobile/i);
  },
  BlackBerry: function() {
      return navigator.userAgent.match(/BlackBerry/i)|| navigator.userAgent.match(/BB10; Touch/);
  },
  iOS: function() {
      return navigator.userAgent.match(/iPhone|iPod/i);
  },
  Opera: function() {
      return navigator.userAgent.match(/Opera Mini/i);
  },
  Windows: function() {
      return navigator.userAgent.match(/IEMobile/i) || navigator.userAgent.match(/webOS/i) ;
  },
  any: function() {
      return (isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows());
  }
};      
 return isMobile.any()
}
2
mohamed-ibrahim

Zde je ještě jeden návrh implementovaný s čistým JavaScriptem (es6)

const detectDeviceType = () =>
    /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)
        ? 'Mobile'
        : 'Desktop';

detectDeviceType();
1
Gor
var device = {
  detect: function(key) {
    if(this['_'+key] === undefined) {
      this['_'+key] = navigator.userAgent.match(new RegExp(key, 'i'));
    }
    return this['_'+key];
  },
  iDevice: function() {
    return this.detect('iPhone') || this.detect('iPod');
  },
  Android: function() {
    return this.detect('Android');
  },
  webOS: function() {
    return this.detect('webOS');
  },
  mobile: function() {
    return this.iDevice() || this.Android() || this.webOS();
  }
};

Použil jsem něco takového v minulosti. To je podobné předchozí odpovědi, ale technicky je výkonnější v tom, že ukládá výsledek zápasu, zejména pokud je detekce používána v animaci, události rolování nebo podobně.

1
Fran

Přidání:

V některých verzích iOS 9.x , Safari nepředstavuje "iPhone" v navigator.userAgent, ale zobrazí ho v navigator.platform.

var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent);
    if(!isMobile){
        isMobile=/iPhone|iPad|iPod/i.test(navigator.platform);
    }
1
NikitOn

Zdá se, že jde o komplexní, moderní řešení:

https://github.com/matthewhudson/device.js

Detekuje několik platforem, smartphone versus tablety a orientaci. Přidává také třídy do značky BODY, takže detekce probíhá pouze jednou a můžete si přečíst, jaké zařízení používáte s jednoduchou řadou funkcí jQuery hasClass.

Koukni na to...

[OMEZENÍ: Nemám nic společného s osobou, která to napsala.]

1
Paolo Mioni

Pokud mobilní zařízení chápete jako dotykové, pak jej můžete určit kontrolou existenci dotykových obsluh:

let deviceType = (('ontouchstart' in window)
                 || (navigator.maxTouchPoints > 0)
                 || (navigator.msMaxTouchPoints > 0)
                 ) ? 'touchable' : 'desktop';

jQuery pro to není potřeba.

1
Daniel Kucal

Znám tuto starou otázku a je zde mnoho odpovědí, ale myslím si, že tato funkce je jednoduchá a pomůže odhalit všechny mobilní, tabletové a počítačové prohlížeče, které fungují jako kouzlo.

function Device_Type() 
{
    var Return_Device; 
    if(/(up.browser|up.link|mmp|symbian|smartphone|midp|wap|phone|Android|iemobile|w3c|acs\-|alav|alca|amoi|audi|avan|benq|bird|blac|blaz|brew|cell|cldc|cmd\-|dang|doco|eric|hipt|inno|ipaq|Java|jigs|kddi|keji|leno|lg\-c|lg\-d|lg\-g|lge\-|maui|maxo|midp|mits|mmef|mobi|mot\-|moto|mwbp|nec\-|newt|noki|Palm|pana|pant|phil|play|port|prox|qwap|sage|sams|sany|sch\-|sec\-|send|seri|sgh\-|shar|sie\-|siem|smal|smar|sony|sph\-|symb|t\-mo|teli|tim\-|tosh|tsm\-|upg1|upsi|vk\-v|voda|wap\-|wapa|wapi|wapp|wapr|webc|winw|winw|xda|xda\-) /i.test(navigator.userAgent))
    {
        if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
        {
            Return_Device = 'Tablet';
        }
        else
        {
            Return_Device = 'Mobile';
        }
    }
    else if(/(tablet|ipad|playbook)|(Android(?!.*(mobi|opera mini)))/i.test(navigator.userAgent)) 
    {
        Return_Device = 'Tablet';
    }
    else
    {
        Return_Device = 'Desktop';
    }

    return Return_Device;
}
1
Mohamad Hamouday

http://www.w3schools.com/jsref/prop_nav_useragent.asp

Filtrovat podle názvu platformy.

Příklad:

x = $( window ).width();

platform = navigator.platform;

alert(platform);

if ( (platform != Ipad) || (x < 768) )  {


} 

^ ^

V závislosti na tom, co chcete detekovat mobilní telefon (což znamená, že tento návrh nebude vyhovovat potřebám všech uživatelů), můžete dosáhnout rozdílu tím, že se podíváte na rozdíl mezi milisekundami onmouseenter-to-onclick, jak jsem popsal v této odpovědi .

0
WoodrowShigeru

Udělám to pro mé .NET aplikace.

V mé sdílené stránce _Layout.cshtml přidám toto.

@{
    var isMobileDevice = HttpContext.Current.Request.Browser.IsMobileDevice;
}

<html lang="en" class="@((isMobileDevice)?"ismobiledevice":"")">

Pak zkontrolujte na libovolné stránce na vašem webu (jQuery):

<script>
var isMobile = $('html').hasClass('ismobiledevice');
</script>
0
Mickey