How to check if a user's device has a touchscreen using only CSS?
Tags: css
Published: 2022-12-12 05:22:04

---
  title: How to check if a user's device has a touchscreen using only CSS?
  published: true
  tags: CSS
  date: Mon Dec 12 2022 10:52:04 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/check-users-device-has-touchscreen-using-only-css
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_79a22de50d.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/check-users-device-has-touchscreen-using-only-css)
  To check if the user's device has a touchscreen using only CSS, you can use the `@media` CSS rule and then use the `pointer` CSS media feature and set its value as `coarse`. If the user's device or the browsing device is a touchscreen, the `pointer: coarse` CSS media feature code block will be triggered where you can define the CSS styles to get applied for the touchscreen.

### TL;DR

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: coarse` CSS media feature to set styles for a touchscreen device */
    @media (pointer: coarse) {
      button {
        background-color: green;
        color: white;
      }
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>
```

For example, let's say we have a webpage with a `button` HTML element like this,

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <body>
    <button>Click Me</button>
  </body>
</html>
```

The webpage looks like this,

![webpage with a button](/uploads/Screenshot_2022_12_06_at_11_00_53_AM_f01cb1505d.png)

The above webpage screenshot is from a desktop device. As you can see that the button has a white background color.

Now let's change the color of the `button` HTML element to a `green` color when the webpage is opened on a touchscreen device.

To do that first, we can add the `@media` CSS media rule with the `pointer: coarse` CSS media feature.

It can be done like this,

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: coarse` CSS media feature to set styles for a touchscreen device */
    @media (pointer: coarse) {
      /* Styles for touchscreen devices can be added here */
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>
```

Now to change the color of the `button` to `green` color, we can use the `background-color` CSS property and set its value to `green` color inside the `pointer: coarse` CSS media feature.

It can be done like this,

```html
<!-- A simple webpage with a `button` HTML element -->
<html>
  <style>
    /* Using the `pointer: coarse` CSS media feature to set styles for a touchscreen device */
    @media (pointer: coarse) {
      button {
        background-color: green;
        color: white;
      }
    }
  </style>
  <body>
    <button>Click Me</button>
  </body>
</html>
```

![webpage having button with green background color on a touchscreen device](/uploads/IMG_4034_64295c051c.PNG)

The above screenshot is from a mobile touchscreen device. As you can see that the `button` background color is changed to `green` color which proves that the CSS media feature is working as expected.

With the same media feature, we can write any kinds of functionalities we need for a touchscreen from CSS code only.

See the above code live in [codesandbox](https://codesandbox.io/s/check-users-device-has-touchscreen-using-only-css-7dx6i2?file=/index.html).

That's all 😃.