How to detect touch screen device 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.
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, mouse, trackpad, stylus, etc.
HTML Code: The following code detects if the user is using a touchscreen device or not.
- Output on the touch screen:
- Output on the non-touch screen:
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.