-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 octobre 2018.
-webkit-device-pixel-ratio
est une caractéristique média non-standard, alternative à la caractéristique média standard resolution
.
Note :
Si possible, utilisez plutôt la requête de caractéristique média standard resolution
. Bien que cette caractéristique préfixée soit propre à WebKit, d'autres moteurs de navigateur peuvent la prendre en charge. Voir la compatibilité des navigateurs ci-dessous.
Syntaxe
La caractéristique -webkit-device-pixel-ratio
se définit avec une valeur de type <number>
. Il s'agit d'une caractéristique d'intervalle : on peut donc aussi utiliser les variantes préfixées -webkit-min-device-pixel-ratio
et -webkit-max-device-pixel-ratio
pour interroger respectivement une valeur minimale ou maximale.
Valeurs
Implémentation
/* Unité dppx implicite */
@media (-webkit-min-device-pixel-ratio: 2) {
/* … */
}
/* équivalent à */
@media (min-resolution: 2dppx) {
/* … */
}
/* De même */
@media (-webkit-max-device-pixel-ratio: 2) {
/* … */
}
/* équivalent à */
@media (max-resolution: 2dppx) {
/* … */
}
Exemples
>HTML
<p>Voici un test pour la densité de pixel de votre appareil.</p>
CSS
/* Résolution exacte */
@media (-webkit-device-pixel-ratio: 1) {
p {
color: red;
}
}
/* Résolution minimale */
@media (-webkit-min-device-pixel-ratio: 1.1) {
p {
font-size: 1.5em;
}
}
/* Résolution maximale */
@media (-webkit-max-device-pixel-ratio: 3) {
p {
background: yellow;
}
}
Résultat
Spécifications
Specification |
---|
Compatibility> # css-media-queries-webkit-device-pixel-ratio> |
Compatibilité des navigateurs
Loading…