-webkit-device-pixel-ratio
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since October 2018.
Der -webkit-device-pixel-ratio
ist ein nicht standardmäßiges Boolean CSS Media-Feature, das eine Alternative zu dem standardmäßigen resolution
Media-Feature darstellt.
Hinweis: Wenn möglich, verwenden Sie stattdessen die resolution
Media-Feature-Anfrage, die ein standardmäßiges Media-Feature ist. Obwohl dieses vorangestellte Media-Feature eine WebKit-Funktion ist, könnten andere Browser-Engines es unterstützen. Siehe Browser-Kompatibilität unten.
Syntax
Das -webkit-device-pixel-ratio
Feature wird als ein <number>
Wert angegeben. Es ist ein Bereichsfeature, was bedeutet, dass Sie auch die vorangestellten Varianten -webkit-min-device-pixel-ratio
und -webkit-max-device-pixel-ratio
verwenden können, um Mindest- bzw. Höchstwerte abzufragen.
Werte
Umsetzung
/* 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
Specification |
---|
Compatibility Standard # css-media-queries-webkit-device-pixel-ratio |
Browser-Kompatibilität
BCD tables only load in the browser