Detect touch screen devices in Javascript

If you want to create web applications ready for multiple devices you have to detect how the user interacts with the device. In many cases, there are devices with touch screens. The user interact with them with their finger or with a pencil.

This is the code I use to detect touch screen devices:

if ("ontouchstart" in document.documentElement)
{
  // It's a touch screen device.
}
else
{
  // Others devices.
}

Demostration

Click or touch on black screen:

Source code of the demostration

To try the demo, copy this code and paste it into a text editor. Then save it as example.html and, finally, open the file with a browser.

<!doctype html>

<html>
  <head>
    <title>Detect touch screen devices in Javascript</title>
    <meta charset="utf-8" />

    <style type="text/css">

      #canvas{background-color: #000;}

    </style>

    <script type="text/javascript">

      document.addEventListener("DOMContentLoaded", init, false);

      function init()
      {
        var canvas = document.getElementById("canvas");

        if ("ontouchstart" in document.documentElement)
        {
          canvas.addEventListener("touchstart", detect, false);
        }
        else
        {
          canvas.addEventListener("mousedown", detect, false);
        }
      }

      function detect()
      {
        if ("ontouchstart" in document.documentElement)
        {
          alert("You are using a touch screen device");
        }
        else
        {
          alert("You are using a normal screen device");
        }
      }

    </script>

  </head>

  <body>
    <canvas id="canvas" width="150" height="150"></canvas>
  </body>
</html>

13 comments:

  1. wow.. I never knew that Javascript can do that. Thanks for this info! :)

    ReplyDelete
  2. Sorry, but this does not work in a Nokia N800, that is detected as a 'normal' screen device.
    Thanks,
    L.

    ReplyDelete
  3. can i use `ontouchstart` on other elements like `div` and `span`?

    ReplyDelete
  4. Works well on Android. On my Windows (Win 8 Preview) touch device... not so much. Cool script, though!

    ReplyDelete
  5. Hi, doesn't work on Samsung Galaxy Tab 2.0 with Android 4.0.3, on my older Galaxy Tab with Android 3.1 everything works fine.

    ReplyDelete
    Replies
    1. Same problem here... sad.

      Delete
  6. Have you ever thought about writing an e-book or guest authoring
    on other blogs? I have a blog centered on the same ideas you discuss and would really
    like to have you share some stories/information. I know my viewers would
    appreciate your work. If you're even remotely interested, feel free to shoot me an email.
    My webpage - do you agree

    ReplyDelete
  7. When I check this page in the iPhone emulator that comes with xCode, I can't scroll past the top 3 lines of the first code block. When I check it on a real iPhone (iOS 6), I can scroll all the way down but the black box is missing.

    ReplyDelete
  8. code dont work with joomla

    ReplyDelete
  9. It has proficient JAVA Developers, who have inside and out aptitude in Java, spring, Hibernate, J2SE and J2EE and utilizing this ability, they create rich-highlights, high security, java

    ReplyDelete
  10. It mights be better for 'ontouchstart' in window, more than for to document.documentElement, as this give bigger for different document insteads of one elements. Also no needs to wait for DOM loadeds in these cases.

    ReplyDelete