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.
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.
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.
fine
The primary input mechanism includes an accurate pointing device.
This example creates a small checkbox for users with fine primary pointers and a large checkbox for users with coarse primary pointers.
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
input[type="checkbox"] { -moz-appearance: none; -webkit-appearance: none; 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; } }
Specification |
---|
Media Queries Level 4 # pointer |
Desktop | Mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
Chrome | Edge | Firefox | Internet Explorer | Opera | Safari | WebView Android | Chrome Android | Firefox for Android | Opera Android | Safari on IOS | Samsung Internet | |
pointer |
41
|
12
|
64
|
No
|
28
|
9
|
41
|
50
|
64
|
28
|
9
|
5.0
|
© 2005–2021 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/pointer