any-pointer
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.
Tính năng media CSS any-pointer kiểm tra xem người dùng có bất kỳ thiết bị trỏ nào (chẳng hạn như chuột) hay không, và nếu có thì độ chính xác của nó là bao nhiêu.
Note:
Nếu bạn muốn kiểm tra độ chính xác của thiết bị trỏ chính, hãy sử dụng pointer thay thế.
Cú pháp
Tính năng any-pointer được chỉ định dưới dạng giá trị từ khóa được chọn từ danh sách dưới đây.
none-
Không có thiết bị trỏ nào có sẵn.
coarse-
Ít nhất một cơ chế nhập liệu bao gồm thiết bị trỏ có độ chính xác hạn chế.
fine-
Ít nhất một cơ chế nhập liệu bao gồm thiết bị trỏ chính xác.
Note:
Nhiều hơn một giá trị có thể khớp nếu các thiết bị có sẵn có các đặc tính khác nhau, mặc dù none chỉ khớp khi không có thiết bị nào là thiết bị trỏ.
Ví dụ
Ví dụ này tạo một hộp kiểm nhỏ cho người dùng có ít nhất một con trỏ chính xác và một hộp kiểm lớn cho người dùng có ít nhất một con trỏ thô. Hộp kiểm lớn được ưu tiên vì nó được khai báo sau hộp nhỏ.
HTML
<input id="test" type="checkbox" /> <label for="test">Nhìn vào tôi!</label>
CSS
input[type="checkbox"]:checked {
background: gray;
}
@media (any-pointer: fine) {
input[type="checkbox"] {
appearance: none;
width: 15px;
height: 15px;
border: 1px solid blue;
}
}
@media (any-pointer: coarse) {
input[type="checkbox"] {
appearance: none;
width: 30px;
height: 30px;
border: 2px solid red;
}
}
Kết quả
Đặc tả
| Specification |
|---|
| Media Queries Level 4 # any-input |