-webkit-device-pixel-ratio CSS Media-Feature
Baseline
Weitgehend verfügbar
Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Oktober 2018 browserübergreifend verfügbar.
Das -webkit-device-pixel-ratio ist ein nicht-standardisiertes, Boolean-basiertes CSS Media-Feature, das eine Alternative zu dem standardisierten resolution Media-Feature darstellt.
Hinweis:
Verwenden Sie nach Möglichkeit die resolution Media-Feature-Abfrage, die ein standardisiertes Media-Feature ist. Während dieses mit Präfix versehene Media-Feature ein WebKit-Feature ist, kann es auch von anderen Browser-Engines unterstützt werden. Siehe unten die Browser-Kompatibilität.
Syntax
Das -webkit-device-pixel-ratio Feature wird als <number> Wert angegeben. Es handelt sich um ein Bereichs-Feature, was bedeutet, dass Sie auch die mit Präfix versehenen Varianten -webkit-min-device-pixel-ratio und -webkit-max-device-pixel-ratio verwenden können, um Mindest- und Höchstwerte abzufragen.
Werte
Implementierung
/* A unit of "dppx" is implied: */
@media (-webkit-min-device-pixel-ratio: 2) {
/* … */
}
/* It is equivalent to: */
@media (min-resolution: 2dppx) {
/* … */
}
/* Similarly: */
@media (-webkit-max-device-pixel-ratio: 2) {
/* … */
}
/* It is equivalent to: */
@media (max-resolution: 2dppx) {
/* … */
}
Beispiele
HTML
<p>This is a test of your device's pixel density.</p>
CSS
/* Exact resolution */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* Minimum resolution */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* Maximum resolution */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}
Ergebnis
Spezifikationen
| Spezifikation |
|---|
| Compatibility # css-media-queries-webkit-device-pixel-ratio |