How to detect touch screen device using JavaScript? Last Updated : 24 Jan, 2022 Summarize Comments Improve Suggest changes Share Like Article Like Report 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: Comment More infoAdvertise with us Next Article How to Detect Keypress using JavaScript ? F feduser Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to detect touch screen device using CSS ? In this article, we will learn how to detect touchscreen devices using CSS. In a website, it becomes important to detect the pointing device used by the user. For example, if the user uses a finger as the pointing device (which has less accuracy on the screen due to more screen-finger contact area) 2 min read Detect a device is iOS or not using JavaScript In order to detect a device whether it is iOS or not. We're going to Navigator platform and Navigator userAgent property. Navigator userAgent property This property returns the value of the user-agent header which is sent by the browser to the server. Returned value, have information about the name, 2 min read How to Detect Keypress using JavaScript ? In this article, keyboard detection is performed using HTML and CSS. HTML stands for "Hypertext Markup Language". HTML language helps the developer to create and design web page elements like links, sections, paragraphs, headings, and blockquotes for web applications. CSS stands for "Cascading Style 2 min read How to detect the user's device using jQuery ? The task is to determine the user's device, whether it is iPad or not, using JQuery. Below are the required methods: Navigator userAgent Property: This property returns the value of the header of user-agent which is sent by the browser to the server. Returned value, have information like name, versi 1 min read How to Detect the Device is an Android Device using JavaScript? Detecting an Android device using JavaScript helps improve web experiences. By checking the user agent string, developers can identify Android devices and apply specific features or styles. This method ensures compatibility and optimizes functionality for different platformsApproachUse the navigator 2 min read How to get the width of device screen in JavaScript ? Given an HTML document that is running on a device and the task is to find the width of the working screen device using JavaScript. Example 1: This example uses window.innerWidth to get the width of the device screen. The innerWidth property is used to return the width of the device. HTML<!DOCTYP 2 min read Like