How to detect touch screen device using JavaScript? - GeeksforGeeks

24 Jan, 2022
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, targeting 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:  
javascript
function is_touch_enabled() {    return ( 'ontouchstart' in window ) ||           ( navigator.maxTouchPoints > 0 ) ||           ( navigator.msMaxTouchPoints > 0 );}
Example: This example displays an image if it detect touch screen device otherwise image will not display.  
html
<!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 ="https://write.geeksforgeeks.org/wp-content/uploads/gfg-39.png";             if( is_touch_enabled() ) {            var img = "<img src=" + src + " height='100'/>";;        }        else {            var img = "";        }             document.getElementById('GFG').innerHTML = img;    </script></body> </html>                   
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.  
html
<!DOCTYPE html><html>     <head>    <title>        Detect touch screen device        using JavaScript    </title>         <link href="https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"    rel="stylesheet">         <script src="https://code.jquery.com/jquery-1.10.2.js"></script>         <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js">    </script>         <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui-touch-punch/0.2.3/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>                   
Output:  
Output on non-touch screen:  
 
Output on touch screen:  
 
 
 
avtarkumar719
as5853535
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills