What s the best way to detect a touch screen device using JavaScript

Question

I ve written a jQuery plug-in that s for use on both desktop and mobile devices  I wondered if there is a way with JavaScript to detect if the device has touch screen capability  I m using jquery-mobile js to detect the touch screen events and it works on iOS  Android etc   but I d also like to write conditional statements based on whether the user s device has a touch screen   Is that possible

User · Answer

All browser supported except Firefox for desktop always TRUE because of Firefox for desktop support responsive design for developer even you click Touch-Button or not!

I hope Mozilla will fix this in next version.

I'm using Firefox 28 desktop.

function isTouch()
{
    return !!("ontouchstart" in window) || !!(navigator.msMaxTouchPoints);
}

User · Answer

Working Fiddle  I have achieved it like this   function isTouchDevice        return true      ontouchstart  in window    window DocumentTouch  amp  amp  document instanceof DocumentTouch      if isTouchDevice     true        alert  Touch Device      your logic for touch device   else       alert  Not a Touch Device      your logic for non touch device

User · Answer

You can install modernizer and use a simple touch event  This is very effective and works on every device I have tested it on including windows surface   I ve created a jsFiddle      function isTouchDevice        if Modernizr hasEvent  touchstart      navigator userAgent search  Touch i     -1            alert  is touch                return true            else              alert  is not touch                return false

User · Answer

Many of these work but either require jQuery  or javascript linters complain about the syntax  Considering your initial question asks for a  JavaScript   not jQuery  not Modernizr  way of solving this  here s a simple function that works every time  It s also about as minimal as you can get   function isTouchDevice         return   window ontouchstart     console log isTouchDevice       One last benefit I ll mention is that this code is framework and device agnostic  Enjoy

User · Answer

The biggest  gotcha  with trying to detect touch is on hybrid devices that support both touch and the trackpad mouse  Even if you re able to correctly detect whether the user s device supports touch  what you really need to do is detect what input device the user is currently using  There s a detailed write up of this challenge and a possible solution here    Basically the approach to figuring out whether a user just touched the screen or used a mouse  trackpad instead is to register both a touchstart and mouseover event on the page   document addEventListener  touchstart   functionref  false     on user tap   touchstart  fires first document addEventListener  mouseover   functionref  false     followed by mouse event  ie   mouseover    A touch action will trigger both of these events  though the former  touchstart  always first on most devices  So counting on this predictable sequence of events  you can create a mechanism that dynamically adds or removes a can-touch class to the document root to reflect the current input type of the user at this moment on the document     function            var isTouch   false   var to indicate current input type  is touch versus no touch           var isTouchTimer          var curRootClass        var indicating current document root class   can-touch  or                        function addtouchclass e                   clearTimeout isTouchTimer                  isTouch   true                 if  curRootClass     can-touch      add  can-touch  class if it s not already present                         curRootClass    can-touch                          document documentElement classList add curRootClass                                    isTouchTimer   setTimeout function   isTouch   false   500    maintain  istouch  state for 500ms so removetouchclass doesn t get fired immediately following a touch event                              function removetouchclass e                   if   isTouch  amp  amp  curRootClass     can-touch      remove  can-touch  class if not triggered by a touch event and class is present                         isTouch   false                         curRootClass                              document documentElement classList remove  can-touch                                                  document addEventListener  touchstart   addtouchclass  false    this event only gets called when input type is touch         document addEventListener  mouseover   removetouchclass  false    this event gets called when input type is everything from touch to mouse  trackpad         More details here

User · Answer

Using all the comments above I ve assembled the following code that is working for my needs   var isTouch      ontouchstart  in window      navigator msMaxTouchPoints  gt  0      I have tested this on iPad  Android  Browser and Chrome   Blackberry Playbook  iPhone 4s  Windows Phone 8  IE 10  IE 8  IE 10  Windows 8 with Touchscreen   Opera  Chrome and Firefox   It currently fails on Windows Phone 7 and I haven t been able to find a solution for that browser yet   Hope someone finds this useful

User · Answer

This one works well even in Windows Surface tablets        function detectTouchSupport   msGesture   window navigator  amp  amp  window navigator msPointerEnabled  amp  amp  window MSGesture  touchSupport       ontouchstart  in window      msGesture    window DocumentTouch  amp  amp      document instanceof DocumentTouch   if touchSupport           html   addClass  ci touch      else          html   addClass  ci no touch

User · Answer

The problem Due to hybrid devices which use a combination of touch and mouse input  you need to be able dynamically change the state   variable which controls whether a piece of code should run if the user is a touch user or not  Touch devices also fire mousemove on tap  Solution  Assume touch is false on load  Wait until a touchstart event is fired  then set it to true  If touchstart was fired  add a mousemove handler  If the time between two mousemove events firing was less than 20ms  assume they are using a mouse as input  Remove the event as it s no longer needed and mousemove is an expensive event for mouse devices  As soon as touchstart is fired again  user went back to using touch   the variable is set back to true  And repeat the process so it s determined in a dynamic fashion  If by some miracle mousemove gets fired twice on touch absurdly quickly  in my testing it s virtually impossible to do it within 20ms   the next touchstart will set it back to true   Tested on Safari iOS and Chrome for Android  Note  not 100  sure on the pointer-events for MS Surface  etc  Codepen demo  const supportsTouch    ontouchstart  in window  let isUsingTouch   false       touchstart    pointerdown  const touchHandler        gt      isUsingTouch   true    document addEventListener  mousemove   mousemoveHandler          use a simple closure to store previous time as internal state const mousemoveHandler         gt      let time       return      gt        const now   performance now         if  now - time  lt  20          isUsingTouch   false        document removeEventListener  mousemove   mousemoveHandler              time   now                add listeners if  supportsTouch      document addEventListener  touchstart   touchHandler     else if  navigator maxTouchPoints    navigator msMaxTouchPoints      document addEventListener  pointerdown   touchHandler

User · Answer

Actually  I researched this question and consider all situations  because it is a big issue on my project too  So I reach the below function  it works for all versions of all browsers on all devices   const isTouchDevice        gt      const prefixes         -webkit-    -moz-    -o-    -ms-          const mq   query   gt  window matchMedia query  matches     if        ontouchstart  in window         window DocumentTouch  amp  amp  document instanceof DocumentTouch            return true        return mq       prefixes join  touch-enabled        heartz        join            Hint  Definitely  the isTouchDevice just returns boolean values

User · Answer

UPDATE 2021 To see the old answers  check the history  I decided to start on a clean slate as it was getting out of hands when keeping the history in the post  My original answer said that it could be a good idea to use the same function as Modernizr was using  but that is not valid anymore as they removed the  quot touchevents quot  tests on this PR  https   github com Modernizr Modernizr pull 2432 due to it being a confusing subject  With that said this should be a fairly ok way of detecting if the browser has  quot touch capabilities quot   function isTouchDevice       return    ontouchstart  in window           navigator maxTouchPoints  gt  0           navigator msMaxTouchPoints  gt  0       But for more advanced use cases far more smarter persons than me have written about this subject  I would recommend reading those articles   Stu Cox  You Can t Detect a Touchscreen Detecting touch  it s the  why   not the  how  Getting touchy presentation by Patrick H  Lauke

User · Answer

No  it s not possible  The excellent answers given are only ever partial  because any given method will produce false positives and false negatives  Even the browser doesn t always know if a touchscreen is present  due to OS APIs  and the fact can change during a browser session  particularly with KVM-type arrangements   See further details in this excellent article   http   www stucox com blog you-cant-detect-a-touchscreen   The article suggests you reconsider the assumptions that make you want to detect touchscreens  they re probably wrong   I checked my own for my app  and my assumptions were indeed wrong    The article concludes      For layouts  assume everyone has a touchscreen  Mouse users can use   large UI controls much more easily than touch users can use small   ones  The same goes for hover states       For events and interactions  assume anyone may have a touchscreen    Implement keyboard  mouse and touch interactions alongside each other    ensuring none block each other

User · Answer

When a mouse is attached  it can be assumed with fairly high hitrate  I would say practially 100   that the user moves the mouse at least a tiny distance after page is ready - without any clicking  The mechanism below detects this  If detected  I consider this as a sign of missing touch support or  if supported  of minor importance when a mouse is in use  Touch-device is assumed if not detected   EDIT This approach may not fit all purposes  It can be used to control functionality that is activated based on user interaction on the loaded page  for instance an image viewer  The code below will also leave the mousemove event bound on devices without mouse as it stands out now  Other approaches may be better   Roughly  it goes like this  sorry for jQuery  but similar in pure Javascript    var mousedown  first  second   false  var ticks   10    document  on  mousemove    function e        if UI mousechecked  return      if  first            first   e pageX          return                if  second  amp  amp  ticks--     0            second   e pageX            document  off  mousemove       or bind it to somewhat else               if first   amp  amp  second   amp  amp  first     second  amp  amp   mousedown              set whatever flags you want         UI hasmouse   true          UI touch   false          UI mousechecked   true             return         document  one  mousedown    function e        mousedown   true      return         document  one  mouseup    function e        mousedown   false      return

User · Answer

You can use the following code   function isTouchDevice        var el   document createElement  div       el setAttribute  ongesturestart    return        or try  ontouchstart     return typeof el ongesturestart      function       Source  Detecting touch-based browsing and  mplungjan post   The above solution was based on detecting event support without browser sniffing article   You can check the results at the following test page   Please note that the above code tests only whether the browser has support for touch  not the device  So if you ve laptop with touch-screen  your browser may not have the support for the touch events  The recent Chrome supports touch events  but other browser may not   You could also try   if  document documentElement ontouchmove                 but it may not work on iPhone devices

User · Answer

The practical answer seems to be one that considers the context   1  Public site  no login    Code the UI to work with both options together   2  Login site Capture whether a mouse-move occurred on the login form  and save this into a hidden input  The value is passed with the login credentials and added to the user s session  so it can be used for the duration of the session   Jquery to add to login page only       istouch   val 1       lt -- value will be submitted with login form  if  window addEventListener        window addEventListener  mousemove   function mouseMoveListener               Update hidden input value to false  and stop listening             istouch   val 0            window removeEventListener  mousemove   mouseMoveListener                  1 to  Dave Burt and  1 to  Martin Lantzsch on their answers

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 think the best method is  var isTouchDevice          ontouchstart  in window          navigator maxTouchPoints  gt  0          navigator msMaxTouchPoints  gt  0    if  isTouchDevice          Code for touch device     else         Code for non touch device

User · Answer

Update  Please read blmstr s answer below before pulling a whole feature detection library into your project  Detecting actual touch support is more complex  and Modernizr only covers a basic use case   Modernizr is a great  lightweight way to do all kinds of feature detection on any site   It simply adds classes to the html element for each feature   You can then target those features easily in CSS and JS  For example   html touch div       width  480px     html no-touch div       width  auto      And Javascript  jQuery example       html touch  popup   hide

User · Answer

This seems to be working fine for me so far     Checks if a touch screen is touch screen    ontouchstart  in document documentElement   if  is touch screen         Do something if a touch screen   else        Not a touch screen  i e  desktop

User · Answer

Since the introduction of interaction media features you simply can do   if window matchMedia   pointer  coarse    matches           touchscreen     https   www w3 org TR mediaqueries-4  descdef-media-any-pointer  Update  due to comments   The above solution is to detect if a  coarse pointer  - usually a touch screen - is the primary input device  In case you want to dectect if a device with e g  a mouse also has a touch screen you may use any-pointer  coarse instead   For more information have a look here  Detecting that the browser has no mouse and is touch-only

User · Answer

We tried the modernizr implementation  but detecting the touch events is not consistent anymore  IE 10 has touch events on windows desktop  IE 11 works  because the ve dropped touch events and added pointer api     So we decided to optimize the website as a touch site as long as we don t know what input type the user has  This is more reliable than any other solution   Our researches say  that most desktop users move with their mouse over the screen before they click  so we can detect them and change the behaviour before they are able to click or hover anything   This is a simplified version of our code   var isTouch   true  window addEventListener  mousemove   function mouseMoveDetector         isTouch   false      window removeEventListener  mousemove   mouseMoveDetector

User · Answer

There is something better than checking if they have a touchScreen  is to check if they are using it  plus that s easier to check   if  window addEventListener        var once   false      window addEventListener  touchstart   function            if   once                once   true                 Do what you need for touch-screens only

User · Answer

As Modernizr doesn t detect IE10 on Windows Phone 8 WinRT  a simple  cross-browser solution is   var supportsTouch    ontouchstart  in window    navigator msMaxTouchPoints    You only ever need to check once as the device won t suddenly support or not support touch  so just store it in a variable so you can use it multiple times more efficiently

User · Answer

Although it s only in alpha  the jquery mobile framework is worth checking out  It will normalize these types of events across mobile browsers  Perhaps see what they re doing  I m assuming jquery-mobile js is something different than this framework

User · Answer

I like this one   function isTouchDevice        return typeof window ontouchstart      undefined      alert isTouchDevice

User · Answer

jQuery v1 11 3  There is a lot of good information in the answers provided   But  recently I spent a lot of time trying to actually tie everything together into a working solution for the accomplishing two things    Detect that the device in use is a touch screen type device  Detect that the device was tapped    Besides this post and Detecting touch screen devices with Javascript  I found this post by Patrick Lauke extremely helpful  https   hacks mozilla org 2013 04 detecting-touch-its-the-why-not-the-how   Here is the code       document  ready function       The page is  ready  and the document can be manipulated       if    ontouchstart  in window      navigator maxTouchPoints  gt  0      navigator msMaxTouchPoints  gt  0                 If the device is a touch capable device  then            document  on  touchstart    a   function                Do something on tap                       else             null              Important   The   on  events    selector      data    handler   method needs to have a selector  usually an element  that can handle the  touchstart  event  or any other like event associated with touches   In this case  it is the hyperlink element  a    Now  you don t need to handle the regular mouse clicking in JavaScript  because you can use CSS to handle these events using selectors for the hyperlink  a  element like so      unvisited link    a link           visited link    a visited           mouse over link    a hover           selected link    a active         Note   There are other selectors as well

User · Answer

I use   if jQuery support touch       alert  Touch enabled        in jQuery mobile 1 0 1

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

User · Answer

Right so there is a huge debate over detecting touch non-touch devices  The number of window tablets and the size of tablets is increasing creating another set of headaches for us web developers  I have used and tested blmstr s answer for a menu  The menu works like this  when the page loads the script detects if this is a touch or non touch device  Based on that the menu would work on hover  non-touch  or on click tap  touch   In most of the cases blmstr s scripts seemed to work just fine  specifically the 2018 one   BUT there was still that one device that would be detected as touch when it is not or vice versa  For this reason I did a bit of digging and thanks to this article I replaced a few lines from blmstr s 4th script into this   x000D   x000D  function is touch device4         if   ontouchstart  in window          return true       if  window DocumentTouch  amp  amp  document instanceof DocumentTouch          return true        return window matchMedia    pointer  coarse     matches     alert  Is touch device    is touch device4     console log  Is touch device    is touch device4     x000D   x000D   x000D   Because of the lockdown have a limited supply of touch devices to test this one but so far the above works great  I would appreceate if anyone with a desktop touch device  ex  surface tablet  can confirm if script works all right  Now in terms of support the pointer  coarse media query seems to be supported  I kept the lines above since I had  for some reason  issues on mobile firefox but the lines above the media query do the trick  Thanks

User · Answer

I also struggled a lot with different options on how to detect in Javascript whether the page is displayed on a touch screen device or not  IMO  as of now  no real option exists to detect the option properly  Browsers either report touch events on desktop machines  because the OS maybe touch-ready   or some solutions don t work on all mobile devices   In the end  I realized that I was following the wrong approach from the start  If my page was to look similar on touch and non-touch devices  I maybe shouldn t have to worry about detecting the property at all  My scenario was to deactivate tooltips over buttons on touch devices as they lead to double-taps where I wanted a single tap to activate the button   My solution was to refactor the view so that no tooltip was needed over a button  and in the end I didn t need to detect the touch device from Javascript with methods that all have their drawbacks

User · Answer

this ways works for me  it wait for first user interaction to make sure they re on touch devices  var touchEnabled   false    document body  one  touchstart       function e           touchEnabled true            document documentElement  addClass  touch               other touch related init

User · Answer

var isTouchScreen    createTouch  in document    or   var isTouchScreen    createTouch  in document    screen width  lt   699         ua match   iPhone iPod iPad       ua match  BlackBerry           ua match  Android      would be a more thorough check I suppose

User · Answer

support touch    true     false

User · Answer

it s so simple if you test that touchstart is supported in document documentElement   x000D   x000D  var x    touchstart  in document documentElement  x000D  console log x  x000D     return true if is supported x000D     else return false x000D   x000D   x000D

User · Answer

I would avoid using screen width to determine if a device is a touch device  There are touch screens much larger than 699px  think of Windows 8  Navigatior userAgent may be nice to override false postives    I would recommend checking out this issue on Modernizr   Are you wanting to test if the device supports touch events or is a touch device  Unfortunately  that s not the same thing

User · Answer

Extent jQuery support object   jQuery support touch    ontouchend  in document    And now you can check it anywhere  like this   if  jQuery support touch         do touch stuff

User · Answer

I used pieces of the code above to detect whether touch  so my fancybox iframes would show up on desktop computers and not on touch  I noticed that Opera Mini for Android 4 0 was still registering as a non-touch device when using blmstr s code alone   Does anyone know why     I ended up using    lt script gt    document  ready function         var ua   navigator userAgent      function is touch device              try                 document createEvent  TouchEvent                  return true              catch  e                  return false                           if   is touch device       ua match   iPhone iPod iPad            ua match  BlackBerry      ua match  Android                 Touch browser       else              Lightbox code            lt  script gt

User · Answer

It looks like Chrome 24 now support touch events  probably for Windows 8  So the code posted here no longer works  Instead of trying to detect if touch is supported by the browser  I m now binding both touch and click events and making sure only one is called    myCustomBind   function controlName  callback         controlName  bind  touchend click   function e        e stopPropagation        e preventDefault         callback call               And then calling it    myCustomBind   mnuRealtime   function                Hope this helps

[javascript] What's the best way to detect a 'touch screen' device using JavaScript?

Examples related to javascript

Examples related to jquery

Examples related to touch