`pointer` CSS media feature

Baseline Widely available

This feature is well established and works across many devices and browser versions. It's been available across browsers since December 2018.

The pointer CSS media feature tests whether the user has a pointing device (such as a mouse), and if so, how accurate the primary pointing device is.

Note: If you want to test the accuracy of any pointing device, use any-pointer instead.

Syntax

The pointer feature is specified as a keyword value chosen from the list below.

none: The primary input mechanism does not include a pointing device.
coarse: The primary input mechanism includes a pointing device of limited accuracy, such as a finger on a touchscreen.
fine: The primary input mechanism includes an accurate pointing device, such as a mouse.

Examples

This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.

HTML

<input id="test" type="checkbox" /> <label for="test">Look at me!</label>

CSS

input[type="checkbox"] {
  appearance: none;
  border: solid;
  margin: 0;
}

input[type="checkbox"]:checked {
  background: gray;
}

@media (pointer: fine) {
  input[type="checkbox"] {
    width: 15px;
    height: 15px;
    border-width: 1px;
    border-color: blue;
  }
}

@media (pointer: coarse) {
  input[type="checkbox"] {
    width: 30px;
    height: 30px;
    border-width: 2px;
    border-color: red;
  }
}

Result

Specifications

Specification
Media Queries Level 4 # pointer

Browser compatibility

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on iOS	Samsung Internet	WebView Android	WebView on iOS
`pointer`	41	12	64	28	9	50	64	28	9	5.0	41	9