How to detect touch screen device using CSS ? Last Updated : 08 May, 2023 Summarize Comments Improve Suggest changes Share Like Article Like Report 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) then we should increase the size of various elements like buttons, links, input fields, etc. so that the user feels comfortable using the website. A touchscreen device can easily be detected using CSS media queries or by using JavaScript. HTML alone cannot detect touchscreen devices. Along with HTML, we will need CSS media queries. In CSS media queries we have a feature called pointer used to detect the pointing accuracy of the pointing device used by the user. It has the following 3 values. pointer: none: It gets triggered when the input mechanism of the device has no pointing device.pointer: coarse: It gets triggered when the input mechanism of the pointing device has less accuracy. For example, touchscreens.pointer: fine: It gets triggered when the input mechanism of the pointing device has high accuracy. For example, a mouse, trackpad, stylus, etc. Example: Here we will detect if the user is using a touchscreen device or not with the help of the above-explained approach. HTML <!DOCTYPE html> <html lang="en"> <head> <style> /* By default, setting the image display to none */ #image-GFG { display: none; } /* In case of touch-screen device, setting image display to block. Using @media to detect pointer accuracy */ @media (pointer:coarse) { #image-GFG { display: block; } } </style> </head> <body> <h2> This image will only be visible on a touch screen device </h2> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20210513020603/GFG.png" id="image-GFG"> </body> </html> Output: Output on the touch screen: Output from a smartphone Output on the non-touchscreen:Output from a non touch-screen desktop Note: To test output on a smartphone, copy the above code into a .html file and transfer it to the smartphone and open it using any browser like Chrome or Safari. Comment More infoAdvertise with us Next Article Detect a device is iOS or not using JavaScript D durgeshpushpakar Follow Improve Article Tags : Web Technologies CSS CSS-Questions Similar Reads 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 3 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 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 device and swap the CSS file ? When creating a webpage, the most important thing is the user experience with the frontend, especially the designing part or CSS. For a smooth experience, a frontend developer needs to make the webpage responsive. As "one size doesn't fit all", a single design will not work on all devices. That's wh 2 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 detect a mobile device in jQuery? We can use JavaScript window.matchMedia() method to detect a mobile device based on the CSS media query. This is the best and easiest way to detect mobile devices. Syntax: window.matchMedia(); Example-1: Program run on desktop. html <!DOCTYPE html> <html lang="en"> <head> 1 min read Like