Pointer accuracy detection with pointer and any-pointer media features
Syntax
| @media ([pointer|any-pointer]: <[none|coarse|fine]>) { | |
| [styles] | |
| } |
| 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> |