What is the best way to detect a mobile device

Question

Is there a way to detect whether or not a user is using a mobile device in jQuery  Something similar to the CSS  media attribute  I would like to run a different script if the browser is on a handheld device  The jQuery   browser function is not what I am looking for

User · Answer

The screen may be on desktop with a small resolution or a mobile with a wide resolution  as so  combining two answers found here in this question const isMobile   window matchMedia  quot only screen and  max-width  760px  quot    if   Mobi Tablet iPad iPhone i test navigator userAgent     isMobile matches        console log  is mobile

User · Answer

Great answer thanks  Small improvement to support Windows phone and 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

User · Answer

You can also detect it like below    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    gt  -1  amp  amp  ua indexOf  mobile         isAndroidTablet    function        var ua   navigator userAgent toLowerCase        return ua indexOf  android    gt  -1  amp  amp    ua indexOf  mobile

User · Answer

This seems to be a comprehensive  modern solution   https   github com matthewhudson device js  It detects several platforms  smartphone vs  tablets  and orientation  It also adds classes to the BODY tag so detection takes place only once and you can read what device you re on with a simple series of jQuery hasClass functions   Check it out      DISCLAIMER  I ve got nothing to do with the person who wrote it

User · Answer

Sometimes it is desired to know which brand device a client is using in order to show content specific to that device  like a link to the iPhone store or the Android market  Modernizer is great  but only shows you browser capabilities  like HTML5  or Flash   Here is my UserAgent solution in jQuery to display a different class for each device type        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              This solution is from Graphics Maniacs http   graphicmaniacs com note detecting-iphone-ipod-ipad-android-and-blackberry-browser-with-javascript-and-php

User · Answer

What you are doing by wanting to detect a mobile device is getting a little too close to a  browser sniffing  concept IMO  It would likely be much better to do some feature detection  Libraries like http   www modernizr com  can help with that   For example  where is the line between mobile and non-mobile  It gets more and more blurry every day

User · Answer

If by  mobile  you mean  small screen   I use this   var windowWidth   window screen width  lt  window outerWidth                     window screen width   window outerWidth  var mobile   windowWidth  lt  500    On iPhone you ll end up with a window screen width of 320  On Android you ll end up with a window outerWidth of 480  though that can depend on the Android   iPads and Android tablets will return numbers like 768 so they ll get the full view like you d want

User · Answer

You could also use server side script and set javascript variables from it    Example in php  download http   code google com p php-mobile-detect  and then set javascript variables     lt script gt    set defaults var device type    desktop    lt  script gt    lt  php require once   Mobile Detect php     detect   new Mobile Detect      gt    lt script gt  device type   lt  php echo   detect- gt isMobile       detect- gt isTablet      tablet     mobile      desktop      gt    alert  device type    lt  script gt

User · Answer

Just copy the following function and it returns a boolean value  its regex is looks like the marked answer but it is has some difference   const isMobile        gt      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  46  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  ev  w bumb bw-  nu   c55   capi ccwa cdm- cell chtm cldc cmd- co mp nd  craw da it ll ng  dbte dc-s devi dica dmob do  cp  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-  mpt   hei- hi pt ta  hp  i ip  hs-c ht c  -  agpst   tp  hu aw tc  i- 20 go ma  i230 iac    -    ibro idea ig01 ikom im1k inno ipaq iris ja  tv  a jbro jemu jigs kddi keji kgt       klon kpt  kwc- kyo  ck   le no xi  lg  g     klu   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  - ov   zz  mt 50 p1 v   mwbp mywa n10 0-2  n20 2-3  n30  02   n50  025   n7 0  01   10  ne   cm  - on tf wf wg wt  nok  6i   nzph o2im op ti wv  oran owg1 p800 pan  adt   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  -01   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  im   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

User · Answer

User agent strings should not be trusted alone  Solution below will work in all situations   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         and call this function   isMobile navigator userAgent    navigator vendor    window opera

User · Answer

Adding   In some versions of iOS 9 x  Safari does not present the  iPhone  in navigator userAgent  but show it in navigator platform   var isMobile    Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent       if  isMobile           isMobile  iPhone iPad iPod i test navigator platform

User · Answer

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             I ve used something like this in the past  This is similar to a previous response  but it s technically more performant in that it caches the result of the match  especially if the detection is being used in an animation  scroll event  or the like

User · Answer

How about mobiledetect net   Other solutions seem too basic  This is a lightweight PHP class  It uses the User-Agent string combined with specific HTTP headers to detect the mobile environment  You can also benefit from Mobile Detect by using any of the 3rd party plugins available for  WordPress  Drupal  Joomla  Magento  etc

User · Answer

You can use media query to be able to handle it easily    isMobile   function        var isMobile   window matchMedia  only screen and  max-width  760px         return isMobile matches   true   false

User · Answer

An ES6 solution that uses several detection techniques within a try catch block  The function consists of creating a  TouchEvent   seeking support for the  ontouchstart  event or even making a query to the mediaQueryList object   Purposely  some queries that fail will throw a new error because as we are in a try catch block we can use it as a fall back to consult the user agent   I have no usage tests and in many cases it can fail as well as point out false positives   It should not be used for any kind of real validation but  in a general scope for analysis and statistics where the volume of data can  forgive  the lack of precision  it may still be useful    x000D   x000D  const isMobile     dc  wd    gt    x000D         get browser  User-Agent  or vendor     see  opera  property in  window  x000D      let ua   wd userAgent    wd navigator vendor    wd opera  x000D      try   x000D              x000D             Creating a touch event     in modern browsers with touch screens or emulators  but not mobile  does not cause errors  x000D             Otherwise  it will create a  DOMException  instance x000D              x000D          dc createEvent  TouchEvent    x000D   x000D             check touchStart event x000D             ontouchstart  in wd       ontouchstart  in dc documentElement     wd DocumentTouch  amp  amp  wd document instanceof DocumentTouch    wd navigator maxTouchPoints    wd navigator msMaxTouchPoints    void 0    new Error  failed check  ontouchstart  event    x000D   x000D             check  mediaQueryList      pass as modern browsers x000D          let mQ   wd matchMedia  amp  amp  matchMedia   pointer  coarse     x000D             if no have  throw error to use  User-Agent  sniffing test x000D          if    mQ    mQ media       pointer  coarse       mQ matches     x000D              throw new Error  failed test  mediaQueryList     x000D            x000D   x000D             if there are no failures the possibility of the device being mobile is great  but not guaranteed  x000D          return true  x000D        catch ex    x000D             fall back to User-Agent sniffing x000D          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 ua      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 ua substr 0 4    x000D        x000D     document  window   x000D   x000D   x000D     to show result x000D  let container   document getElementById  result    x000D   x000D  container textContent   isMobile    Yes  your device appears to be mobile     No  your device does not appear to be mobile   x000D   lt p id  result  gt  lt  p gt  x000D   x000D   x000D      The regex used to test the user agent is a little old and was available on the website http   mobiledetect com which is no longer in operation   Maybe there is a better pattern but  I don t know     Fonts    TouchEvent  https   developer mozilla org en-US docs Web API TouchEvent ontouchstart  https   developer mozilla org en-US docs Web API GlobalEventHandlers ontouchstart mediaQueryList  https   developer mozilla org en-US docs Web API MediaQueryList     PS   As there is no way to identify with 100  accuracy neither by checking features  nor by examining the user agent string with regular expressions  The code snippet above should be seen only as   one more example for this issue   as well as   not recommended for use in production

User · Answer

For me small is beautiful so I m using this technique   In CSS file      Smartphones -----------     media only screen and  max-width  760px       some-element   display  none        In jQuery JavaScript file        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              My objective was to have my site  mobile-friendly   So I use CSS Media Queries do show hide elements depending on the screen size   For example  in my mobile version I don t want to activate the Facebook Like Box  because it loads all those profile images and stuff  And that s not good for mobile visitors  So  besides hiding the container element  I also do this inside the jQuery code block  above    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 amp appId 210731252294735           fjs parentNode insertBefore js  fjs         document   script    facebook-jssdk         You can see it in action at http   lisboaautentica com  I m still working on the the mobile version  so it s still not looking as it should  as of writing this   Update by dekin88  There is a JavaScript API built-in for detecting media  Rather than using the above solution simply use the following     function               let isMobile   window matchMedia  only screen and  max-width  760px    matches       if  isMobile              Conditional script here              Browser Supports  http   caniuse com  feat matchmedia  The advantage of this method is that it s not only simpler and shorter  but you can conditionally target different devices such as smartphones and tablets separately if necessary without having to add any dummy elements into the DOM

User · Answer

Here s a function you can use to get a true false answer as to whether you re running on a mobile browser  Yes  it is browser-sniffing  but sometimes that is exactly what you need   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

User · Answer

I would be suggesting to use following combo of strings  to check if device type being used   As per Mozilla documentation string Mobi is recommended  But  some of the old tablets doesn t return true if only Mobi is used  hence we should use Tablet string too   Similarly  for being on the safe side iPad and iPhone strings could also be used to check the device type   Most of the new devices would return true for Mobi string alone   if   Mobi Tablet iPad iPhone  test navigator userAgent            do something

User · Answer

All answers use user-agent to detect the browser but device detection based on user-agent is not very good solution  better is to detect features like touch device  in new jQuery they remove   browser and use   support instead    To detect mobile you can check for touch events   function is touch device       return  ontouchstart  in window    works on most browsers            onmsgesturechange  in window     works on ie10     Taken from What  39 s the best way to detect a   39 touch screen  39  device using JavaScript

User · Answer

Editor s note  user agent detection is not a recommended technique for modern web apps  See the comments below this answer for confirmation of this fact  It is suggested to use one of the other answers using feature detection and or media queries   Instead of using jQuery you can use simple JavaScript to detect it  if   Android webOS iPhone iPad Mac Macintosh iPod BlackBerry IEMobile Opera Mini i test navigator userAgent          some code      Or you can combine them both to make it more accessible through jQuery      browser device     android webos iphone ipad ipod blackberry iemobile opera mini i test navigator userAgent toLowerCase       Now   browser will return  quot device quot  for all above devices Note    browser removed on jQuery v1 9 1  But you can use this by using jQuery migration plugin Code  A more thorough version  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

User · Answer

According to Mozilla - Browser detection using the user agent      In summary  we recommend looking for the string    Mobi    anywhere in the User Agent to detect a mobile device    Like this   if   Mobi  test navigator userAgent            mobile      This will match all common mobile browser user agents  including mobile Mozilla  Safari  IE  Opera  Chrome  etc   Update for Android  EricL recommends testing for Android as a user agent also  as the Chrome user agent string for tablets does not include  Mobi   the phone versions do however    if   Mobi Android i test navigator userAgent            mobile

User · Answer

Utilized previously mentioned sequielo solution and added the function for width height check  to avoid screen rotation mistake   For selecting min max borders for mobile viewport  I use this resource https   www mydevice io  compare-devices  function isMobile         try  document createEvent  TouchEvent    return true        catch e   return false       function deviceType         var width   Math max document documentElement clientWidth  window innerWidth    0       var height   Math max document documentElement clientHeight  window innerHeight    0  screenType      if  isMobile             if   width  lt   650  amp  amp  height  lt   900      width  lt   900  amp  amp  height  lt   650               screenType    Mobile Phone           else             screenType    Tablet             else         screenType    Desktop     return screenType

User · Answer

Check out this post  it gives a really nice code snippet for what to do when touch devices are detected or what to do if touchstart event is called     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  amp  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

User · Answer

I know it s very old question about this kind of detection   My solution is based on scroller width  is exist or not     x000D   x000D     this function will check the width of scroller x000D     if scroller width is less than 10px it s mobile device x000D   x000D    function ismob     x000D      var dv   document getElementById  divscr    x000D      var sp document getElementById  res    x000D      if  dv offsetWidth - dv clientWidth  lt  10   sp innerHTML  Is mobile     return true   x000D        else   x000D      sp innerHTML  It is not mobile     return false  x000D        x000D      x000D   lt  -- put hidden div on very begining of page -- gt  x000D   lt div id  divscr  style  position fixed top 0 left 0 width 50px height 50px overflow hidden overflow-y scroll z-index -1 visibility hidden   gt  lt  div gt  x000D   lt span id  res  gt  lt  span gt  x000D   x000D   x000D

User · Answer

Depending on what for you want to detect mobile  meaning this suggestion won t suit everyone s needs   you might be able to achieve a distinction by looking at the onmouseenter-to-onclick millisecond difference  like I described in this answer

User · Answer

lt script gt    function checkIsMobile          if navigator userAgent indexOf  Mobile    gt  0           return true         else          return false                lt  script gt    If you goto any browser and if you try to get navigator userAgent then we ll be getting the browser information something like following  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  The same thing if you do in mobile you ll be getting following  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  Every mobile browser will have useragent with string containing  Mobile  So I m using above snippet in my code to check whether current user agent is web mobile  Based on the result I ll be doing required changes

User · Answer

In one line of javascript  var isMobile     ontouchstart  in document documentElement  amp  amp   mobi i test navigator userAgent    If the user agent contains  Mobi   as per MDN  and ontouchstart is available then it is likely to be a mobile device  EDIT  Updates the regex code in response to feedback in the comments  Using regex mobi i the i makes it case-insensitive  and mobi matches all mobile browsers  See https   developer mozilla org en-US docs Web HTTP Headers User-Agent Firefox

User · Answer

You can t rely on navigator userAgent  not every device reveals its real OS  On my HTC for example  it depends on the settings   using mobile version  on off   On http   my clockodo com  we simply used screen width to detect small devices  Unfortunately  in some Android versions there s a bug with screen width  You can combine this way with the userAgent   if screen width  lt  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

User · Answer

Use this          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     Then use this   if jQuery browser mobile         console log  You are using a mobile device       else        console log  You are not using a mobile device

User · Answer

This is my code I m using in my projects   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

User · Answer

I advise you check out http   wurfl io   In a nutshell  if you import a tiny JavaScript file    lt script type  text javascript  src    wurfl io wurfl js  gt  lt  script gt    You will be left with a JSON object that looks like       complete device name   Google Nexus 7     is mobile  true    form factor   Tablet       That s assuming you are using a Nexus 7  of course  and you will be able to do things like   if WURFL is mobile          dostuff        This is what you are looking for   Disclaimer  I work for the company that offers this free service

User · Answer

Here is one more suggestion implemented with pure JavaScript  es6   const detectDeviceType        gt       Android webOS iPhone iPad iPod BlackBerry IEMobile Opera Mini i test navigator userAgent             Mobile             Desktop    detectDeviceType

User · Answer

Simple function based on 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

User · Answer

To add an extra layer of control I use the HTML5 storage to detect if it is using mobile storage or desktop storage  If the browser does not support storage I have an array of mobile browser names and I compare the user agent with the browsers in the array   It is pretty simple  Here is the function      Used to detect whether the users browser is an mobile browser function isMobile             lt summary gt Detecting whether the browser is a mobile browser or desktop browser lt  summary gt          lt returns gt A boolean value indicating whether the browser is a mobile browser or not lt  returns gt       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    gt  -1  return true          nothing found   assume desktop     return false

User · Answer

I am surprised that no one pointed out a nice site  http   detectmobilebrowsers com  It has ready made code in different languages for mobile detection  including but not limited to     Apache ASP C  IIS JavaScript NGINX PHP Perl Python Rails   And if you need to detect the tablets as well  just check About section for additional RegEx parameter      Android tablets  iPads  Kindle Fires and PlayBooks are not detected by   design  To add support for tablets  add  android ipad playbook silk to   the first regex

User · Answer

I know this question has a lot of answers  but from what I saw nobody approaches the answer the way I would solve this   CSS uses width  Media Queries  to determine which styles applied to the web document baseed on width  Why not use width in the JavaScript   For instance in Bootstrap s  Mobile First  Media Queries  there exist 4 snap break points    Extra Small Devices are 768 pixels and under  Small Devices range from 768 to 991 pixels  Medium Devices range from 992 to 1199 pixels  Large Devices are 1200 pixels and up    We can use this to also solve our JavaScript issue as well   First we will create a function that gets the window size and returns a value that allows us to see what size device is viewing our application   var getBrowserWidth   function        if window innerWidth  lt  768              Extra Small Device         return  xs         else if window innerWidth  lt  991              Small Device         return  sm        else if window innerWidth  lt  1199              Medium Device         return  md        else              Large Device         return  lg             Now that we have the function set up  we can call it ans store the value   var device   getBrowserWidth      Your question was     I would like to run a different script if the browser is on a handheld device    Now that we have the device information all that is left is an if statement   if device      xs         Enter your script for handheld devices here      Here is an example on CodePen  http   codepen io jacob-king pen jWEeWG

User · Answer

It s not jQuery  but I found this  http   detectmobilebrowser com   It provides scripts to detect mobile browsers in several languages  one of which is JavaScript  That may help you with what you re looking for   However  since you are using jQuery  you might want to be aware of the jQuery support collection  It s a collection of properties for detecting the capabilities of the current browser  Documentation is here  http   api jquery com jQuery support   Since I don t know what exactly what you re trying to accomplish  I don t know which of these will be the most useful   All that being said  I think your best bet is to either redirect or write a different script to the output using a server-side language  if that is an option   Since you don t really know the capabilities of a mobile browser x  doing the detection  and alteration logic on the server side would be the most reliable method  Of course  all of that is a moot point if you can t use a server side language

User · Answer

These are all of the vaules I am aware of  Please help udating the array if you know of any other values   function ismobile       if  android webos iphone ipad ipod blackberry opera mini Windows Phone iemobile WPDesktop XBLWP7 i test navigator userAgent toLowerCase              return true          else     return false

User · Answer

function isDeviceMobile     var isMobile       Android  function           return navigator userAgent match  Android i   amp  amp  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

User · Answer

You could do simple thing very simple like this  window screen width  lt  700          The device is a Mobile   else         The device is a Desktop

User · Answer

I know this old question and there is a lot of answer but I think this function is simple and will help for detect all mobile  Tablet and computer browser it work like a charm   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

User · Answer

Ya ll are doing way too much work   if  window screen availWidth  lt   425          do something     You can do this on page load through JS  No need to write long string lists to try and catch everything  Whoops  you missed one  Then you have to go back and change it add it  The more popular phone sizes are about 425 in width or less  in portrait mode   tablets are around 700 ish and anything bigger is likely a laptop  desktop  or other larger device  If you need mobile landscape mode  maybe you should be working in Swift or Android studio and not traditional web coding   Side note  This may not have been an available solution when it was posted but it works now

User · Answer

I do this for my  NET applications   In my shared  Layout cshtml Page  I add this          var isMobileDevice   HttpContext Current Request Browser IsMobileDevice      lt html lang  en  class     isMobileDevice   ismobiledevice       gt    Then to check on any page in your site  jQuery     lt script gt  var isMobile      html   hasClass  ismobiledevice     lt  script gt

User · Answer

Checkout http   detectmobilebrowsers com  which provides you script for detecting mobile device in variety of languages including  JavaScript  jQuery  PHP  JSP  Perl  Python  ASP  C   ColdFusion and many more

User · Answer

A simple and effective one-liner   function isMobile     return   ontouchstart  in document documentElement       However above code doesn t take into account the case for laptops with touchscreen  Thus  I provide this second version  based on  Julian solution   function isMobile       try  document createEvent  TouchEvent    return true      catch e   return false

User · Answer

This is what I do  function checkMobile       var os   GetOS      if  os     quot Android OS quot     os     quot iOS quot             do what you wanna do      return true        and to redirect I add location href  quot mobile website com quot  and then add this body tag  lt body onload  quot checkMobile   quot  gt  lt  body gt

User · Answer

If you re not particularly worried about small displays you could use width height detection  So that way if width is under a certain size  the mobile site is thrown up  It may not be the perfect way  but it will probably be the easiest to detect for multiple devices  You may need to put in a specific one for the iPhone 4  large resolution

User · Answer

Use this      if  screen width  lt   480             is mobile

User · Answer

http   www w3schools com jsref prop nav useragent asp  Filter by platform name   Ex   x      window   width     platform   navigator platform   alert platform    if    platform    Ipad      x  lt  768

User · Answer

If you want to test the user agent  the correct way is to  test the user agent  i e  test navigator userAgent   If the user fakes this they are not due concern  If you test isUnix   you should not subsequently have to worry if the system is Unix   As a user changing userAgent is also fine  but you don t expect sites to render properly if you do   If you wish to provide support for Microsoft browsers you should ensure the first few characters of the content includes  and test every page you write   Bottom line    Always code to the standards  Then hack it until it works in the current version of IE  amp  don t expect it to look good  That s what GitHub does  and they just got given 100 million bucks

User · Answer

I use this   if navigator userAgent search  mobile   gt 0             do something here

User · Answer

If found that just checking navigator userAgent isn t always reliable  Greater reliability can be achieved by also checking navigator platform  A simple modification to a previous answer seems to work better   if   Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent          Android webOS iPhone iPad iPod BlackBerry i test navigator platform             some code

User · Answer

I tried some of the ways and then I decided to fill a list manually and do a simple JS check  And in the end the user has to confirm  Because some checks gave false positive or negative   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   amp  amp  confirm  Are you on a mobile device     isMobile   true    Now  if you want to use jQuery to set the CSS  you could do the following     document  ready function       if  isMobile     link type  text css     attr  href     mobile css          Since the borders between mobile and fixed devices become fluent and mobile browers are already powerful  checking width and user confirmation will probably be the best for the future  assuming that width in some cases will still be important   Because touches are already converted into mouse-ups and downs   And concerning the mobile movability  I suggest you to think about Yoav Barnea s idea   if typeof window orientation      undefined

User · Answer

Also I recommend using the tiny JavaScript library Bowser  yes no r  It is based on the navigator userAgent and quite well tested for all browsers including iPhone  Android etc   https   github com ded bowser  You can use simply say   if  bowser msie  amp  amp  bowser version  lt   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

User · Answer

Crude  but sufficient for restricting loading larger resources such as video files on phones vs tablet desktop - simply look for small width or height to cover both orientations  Obviously  if the desktop browser has been resized the below could erroneously detect a phone  but that s fine   close enough for my use case   Why 480  bcs that s what looks about right based on the info I ve found re phone device dimensions   if document body clientWidth  lt  480    document body clientHeight  lt  480        this is a mobile device

User · Answer

I use this solution and it works fine on all devices   if  typeof window orientation      undefined     navigator userAgent indexOf  IEMobile       -1         is mobile

User · Answer

If by a mobile device you understand a touchable one  then you can determine it by checking existence of touch handlers   let deviceType      ontouchstart  in window                       navigator maxTouchPoints  gt  0                       navigator msMaxTouchPoints  gt  0                        touchable     desktop     jQuery is not needed for it

User · Answer

Found a solution in  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                And then to verify if its a Mobile  you can test using    if isMobile any           some code

User · Answer

If you use Modernizr  it is very easy to use Modernizr touch as mentioned earlier   However  I prefer using a combination of Modernizr touch and user agent testing  just to be safe   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         If you don t use Modernizr  you can simply replace the Modernizr touch function above with   ontouchstart  in document documentElement   Also note that testing the user agent iemobile will give you broader range of detected Microsoft mobile devices than Windows Phone   Also see this SO question

[javascript] What is the best way to detect a mobile device?

Examples related to javascript

Examples related to jquery

Examples related to mobile

Examples related to browser-detection