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.

Die pointer CSS Media-Feature ü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 eines beliebigen Zeigegeräts testen möchten, verwenden Sie stattdessen any-pointer.

Syntax

Das pointer-Feature wird als Schlüsselwortwert angegeben, das aus der folgenden Liste ausgewählt wird.

none

Der primäre Eingabemechanismus umfasst kein Zeigegerät.

coarse

Der primäre Eingabemechanismus umfasst ein Zeigegerät mit begrenzter Genauigkeit, wie einen Finger auf einem Touchscreen.

fine

Der primäre Eingabemechanismus umfasst ein genaues Zeigegerät, wie eine Maus.

Beispiele

Dieses Beispiel erstellt ein kleines Kontrollkästchen für Benutzer mit präzisen 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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
pointer media feature

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

Siehe auch