How to detect touch screen device using JavaScript?

Sometimes you might be looking for some features to include into your web-app that should only be available to devices with a touch screen. You may need this detection while introducing newer smarter controls for touch screen users in the game app or a GPS and navigation application. While there are many JavaScript libraries such as Modernizer, jQuery, etc, that are explicitly designed to do such kind of tasks.

It is noted that the device supports touch events doesn’t necessarily mean that it is exclusively a touch screen device. Many of the high-end ultrabooks are touch enabled. So for better user experience, you should consider a few more attributes alongside checking for a touch screen device.

To perform this check, targetting all possible browsers out there, we will be using following three properties;



  • ontouchstart: An event handler that handles event triggered after touching a DOM element.
  • maxTouchPoints: A read-only property of a Navigator interface returns the maximum number of simultaneous touch contact points that the device supports.
  • msMaxTouchPoints: Same as above, just with vendor prefix “ms” to target browsers IE 10 and below.

Syntax:

filter_none

edit
close

play_arrow

link
brightness_4
code

function is_touch_enabled() {
    return ( 'ontouchstart' in window ) || 
           ( navigator.maxTouchPoints > 0 ) || 
           ( navigator.msMaxTouchPoints > 0 );
}

chevron_right


Example: This example displays an image if it detech touch screen device otherwise image will not display.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
  
<head>
    <title>
        Detect touch screen device 
        using JavaScript
    </title>
</head>
  
<body>
    <p>
        Detect touch screen device 
        using JavaScript
    </p>
      
    <p>
        If touch screen detected then display
        an image otherwise image will not
        display    
    </p>
      
    <div id="GFG"></div>
  
    <script type="text/javascript">
      
        function is_touch_enabled() {
            return ( 'ontouchstart' in window ) || 
                   ( navigator.maxTouchPoints > 0 ) ||
                   ( navigator.msMaxTouchPoints > 0 );
        }
      
        var src = 
      
        if( is_touch_enabled() ) {
            var img = "<img src=" + src + " height='100'/>";;
        }
        else {
            var img = "";
        }
      
        document.getElementById('GFG').innerHTML = img;
    </script>
</body>
  
</html>                    

chevron_right


Output:

  • Output on non-touch screen:
  • Output on touch screen:

Example 2: In this example, a <div> is draggable only if the device is touch-enabled.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
      
<head>
    <title>
        Detect touch screen device 
        using JavaScript
    </title>
      
    <link href=
    rel="stylesheet"
      
    <script src="https://code.jquery.com/jquery-1.10.2.js"></script
      
    </script>
      
    <script src=
jquery.ui.touch-punch.min.js">
    </script
  
    <style>
        #draggable {
            width: 150px;
            height: 50px;
            text-align: center;
        }
    </style>
      
    <script>
        function is_touch_enabled() {
            return ( 'ontouchstart' in window ) || 
                   ( navigator.maxTouchPoints > 0 ) ||
                   ( navigator.msMaxTouchPoints > 0 );
        }
          
        if( is_touch_enabled() ) {
            $(function() { 
                $( "#draggable" ).draggable();
            });
        }
    </script>
</head>
  
<body>
    <div id="draggable" class="ui-widget-content"
        <p>Draggable Elements!</p
    </div
</body>
  
</html>                    

chevron_right


Output:

  • Output on non-touch screen:
  • Output on touch screen:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.