How to detect a mobile device with JavaScript

Question

I have been asked to create an actual HTML page   JavaScript to simulate detection of the mobile devices  iPhone   iPad   Android  using JavaScript code  This will then take the user to a different screen which asks them for their email address

User · Answer

You would detect the requesting browsers user agent string, and then decide based on what it is if it's coming from a mobile browser or not. This device is not perfect, and never will be due to the fact that user agents aren't standardized for mobile devices (at least not to my knowledge).

This site will help you create the code: http://www.hand-interactive.com/resources/detect-mobile-javascript.htm

Example:

You could get the user agent in javascript by doing this:

var uagent = navigator.userAgent.toLowerCase();

And then do the check's in the same format as this (just using iPhone as a quick example, but others would need to be a little bit different)

function DetectIphone()
{
   if (uagent.search("iphone") > -1)
      alert('true');
   else
      alert('false');
}

Edit

You'd create a simple HTML page like so:

<html>
    <head>
        <title>Mobile Detection</title>
    </head>
    <body>
        <input type="button" OnClick="DetectIphone()" value="Am I an Iphone?" />
    </body>
</html>
<script>
    function DetectIphone()
    {
       var uagent = navigator.userAgent.toLowerCase();
       if (uagent.search("iphone") > -1)
          alert('true');
       else
          alert('false');
    }
</script>

User · Answer

I use mobile    Android webOS iPhone iPad iPod BlackBerry i test navigator userAgent

User · Answer

Another possibility is to use mobile-detect js  Try the demo   Browser usage    lt script src  mobile-detect js  gt  lt  script gt   lt script gt      var md   new MobileDetect window navigator userAgent              see below  lt  script gt    Node js   Express   var MobileDetect   require  mobile-detect        md   new MobileDetect req headers  user-agent            see below   Example   var md   new MobileDetect       Mozilla 5 0  Linux  U  Android 4 0 3  en-in  SonyEricssonMT11i          Build 4 1 A 0 562  AppleWebKit 534 30  KHTML  like Gecko           Version 4 0 Mobile Safari 534 30        more typically we would instantiate with  window navigator userAgent     as user-agent  this string literal is only for better understanding  console log  md mobile                   Sony  console log  md phone                    Sony  console log  md tablet                  null console log  md userAgent                Safari  console log  md os                       AndroidOS  console log  md is  iPhone              false console log  md is  bot                 false console log  md version  Webkit                 534 3 console log  md versionStr  Build                4 1 A 0 562  console log  md match  playstation xbox         false

User · Answer

Determine what the User Agent is for the devices that you need to simulate and then test a variable against that   for example      var userAgent   navigator userAgent toLowerCase       this would actually get the user agent  var userAgent    iphone      Simulates User Agent for iPhone    if  userAgent indexOf  iphone      -1          some code here

User · Answer

Since it s now 2015  if you stumbled across this question then you should probably be using window matchMedia  and  if it s still 2015  polyfilling for older browsers    if  matchMedia  handheld   matches                else

User · Answer

Simply use DeviceDetection  deviceDetection deviceType    phone   tablet according to device

User · Answer

Testing for user agent is complex  messy and invariably fails  I also didn t find that the media match for  handheld  worked for me  The simplest solution was to detect if the mouse was available  And that can be done like this   var result   window matchMedia   any-pointer coarse    matches    That will tell you if you need to show hover items or not and anything else that requires a physical pointer  The sizing can then be done on further media queries based on width   The following little library is a belt braces version of the query above  should cover most  are you a tablet or a phone with no mouse  scenarios   https   patrickhlauke github io touch touchscreen-detection   Media matches have been supported since 2015 and you can check the compatibility here  https   caniuse com  search matchMedia  In short you should maintain variables relating to whether the screen is touch screen and also what size the screen is  In theory I could have a tiny screen on a mouse operated desktop

User · Answer

I know this answer is coming 3 years late but none of the other answers are indeed 100  correct  If you would like to detect if the user is on ANY form of mobile device  Android  iOS  BlackBerry  Windows Phone  Kindle  etc    then you can use the following code   if   Android webOS iPhone iPad iPod BlackBerry BB PlayBook IEMobile Windows Phone Kindle Silk Opera Mini i test navigator userAgent            Take the user to a different screen here

User · Answer

A simple solution could be css-only  You can set styles in your stylesheet  and then adjust them on the bottom of it  Modern smartphones act like they are just 480px wide  while they are actually a lot more  The code to detect a smaller screen in css is   media handheld  only screen and  max-width  560px   only screen and  max-device-width  480px          hoofdcollumn  margin  10px 5   width 90       Hope this helps

User · Answer

So I did this  Thank you all    lt head gt   lt script type  text javascript  gt      function DetectTheThing                var uagent   navigator userAgent toLowerCase           if  uagent search  iphone    gt  -1    uagent search  ipad    gt  -1            uagent search  android    gt  -1    uagent search  blackberry    gt  -1           uagent search  webos    gt  -1            window location href   otherindex html          lt  script gt    lt  head gt    lt body onload  DetectTheThing    gt  VIEW NORMAL SITE  lt  body gt    lt  html gt

User · Answer

if navigator userAgent match  iPad i       code for iPad here     if navigator userAgent match  iPhone i       code for iPhone here      if navigator userAgent match  Android i       code for Android here       if navigator userAgent match  BlackBerry i       code for BlackBerry here      if navigator userAgent match  webOS i       code for webOS here

User · Answer

I advise you check out http   wurfl io   In a nutshell  if you import a tiny JS 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   WURFL complete device name   This is what you are looking for   Disclaimer  I work for the company that offers this free service  Thanks

User · Answer

As I  kind of without success  searched for the proper solution for my hack  I want to add my hack here nonetheless  I simply check for support of device orientation  which seems the most significant diffrence between mobiles and desktop   var is handheld 0     just a global if window DeviceOrientationEvent   is handheld 1    That being said  imho a page should also offer manual choice between mobile   desktop layout  I got 1920 1080 and I can zoom in -  an oversimplified and feature-reduced wordpressoid chunk is not always a good thing  Especially forcing a layout based on nonworking device detection - it happens all the time

User · Answer

This is my version  quite similar to the upper one  but I think good for reference   if  mob url            lt url   desk url    else if   useragent indexOf  iPhone      -1    useragent indexOf  Android      -1    useragent indexOf  Blackberry      -1    useragent indexOf  Mobile      -1   amp  amp  useragent indexOf  iPad      -1  amp  amp  mob url            lt url   mob url    else     lt url   desk url

User · Answer

var isMobileDevice   navigator userAgent match  iPad iPhone iPod i     null         screen width  lt   480

User · Answer

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

A pretty simple solution is to check for the screen width  Since almost all mobile devices have a max screen width of 480px  at present   it s pretty reliable   if  screen width  lt   480         location href     mobile html       The user-agent string is also a place to look  However  the former solution is still better since even if some freaking device does not respond correctly for the user-agent  the screen width doesn t lie   The only exception here are tablet pc s like the ipad  Those devices have a higher screen width than smartphones and I would probably go with the user-agent-string for those

User · Answer

Similar to several of the answers above   This simple function  works very well for me   It is current as of 2019  function IsMobileCard     var check    false    function a  if   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    check   true    navigator userAgent  navigator vendor  window opera    return check

User · Answer

You can use the user-agent string to detect this   var useragent   navigator userAgent toLowerCase     if  useragent search  iphone              iphone else if  useragent search  ipod              ipod else if  useragent search  android              android etc   You can find a list of useragent strings here http   www useragentstring com pages useragentstring php

User · Answer

This is an example of how to check if webpage is loaded in Desktop or mobile app   JS will execute on page load and you can do Desktop specific things on page load eg hide barcode scanner       lt  DOCTYPE html gt       lt html gt       lt head gt        lt script type  text javascript  gt                                Hide Scan button if Page is loaded in Desktop Browser                            function hideScanButtonForDesktop                      if     Android webOS iPhone iPad iPod BlackBerry BB PlayBook IEMobile Windows Phone Kindle Silk Opera Mini i test navigator userAgent                              Hide scan button for Desktop                     document getElementById  btnLinkModelScan   style display    none                                                           toggle scanButton for Desktop on page load             window onload   hideScanButtonForDesktop           lt  script gt       lt  head gt

[javascript] How to detect a mobile device with JavaScript?

Examples related to javascript

Examples related to html

Examples related to mobile

Examples related to device