pointer
Baseline
Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since Dezember 2018.
Die pointer CSS Media-Funktion überprüft, ob der Benutzer ein Zeigegerät (wie eine Maus) hat und falls ja, wie genau das primäre Zeigegerät ist.
Hinweis:
Wenn Sie die Genauigkeit jedes Zeigegeräts testen möchten, verwenden Sie stattdessen any-pointer.
Syntax
Die pointer-Funktion wird als ein Schlüsselwortwert festgelegt, der aus der unten stehenden Liste ausgewählt wird.
Beispiele
Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit feinen primären Zeigegeräten und ein großes Kontrollkästchen für Benutzer mit groben primären Zeigegeräten.
HTML
html
<input id="test" type="checkbox" /> <label for="test">Look at me!</label>
CSS
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;
}
}
Ergebnis
Spezifikationen
| Specification |
|---|
| Media Queries Level 4 # pointer |
Browser-Kompatibilität
Loading…