Patricio Treviño

Patricio Treviño

Husband . Father . Developer

Pointer accuracy detection with pointer and any-pointer media features

Syntax

@media ([pointer|any-pointer]: <[none|coarse|fine]>) {
[styles]
}
view raw syntax.text hosted with ❤ by GitHub

Option Description
none Use when the primary input mechanism of the device does not include a pointing device
coarse Use when the primary input mechanism of the device includes a pointing device of limited accuracy
fine Use when the primary input mechanism of the device includes an accurate pointing device (mouse)

For devices that support multiple input mechanisms, such as computers with touchscreen support (e.g. Microsoft Surface devices), pointer will only consider the primary input mechanism. The any-pointer media feature can help in those cases as it detects all input mechanisms in the device.

Example

<html>
<head>
<style>
.container {
margin-top: 0px;
}
.container > span {
display: block;
}
@media (pointer: fine) {
.container > span:after {
content: "A high accuracy device has been detected.";
}
}
@media (pointer: coarse) {
input[type="checkbox"],
input[type="radio"] {
min-width:30px;
min-height:40px;
background:transparent;
}
.container > span {
font-size: 16px;
}
.container > span:after {
content: "A limited accuracy device has been detected."
}
}
</style>
</head>
<body>
<div class="container">
<span></span>
<input type="checkbox">
<input type="radio">
</div>
</body>
</html>
view raw example.html hosted with ❤ by GitHub

Output