-webkit-device-pixel-ratio

-webkit-device-pixel-ratio est une caractéristique média non-standard, alternative à la caractéristique média standard resolution.

Sa valeur correspond au nombre de pixels physiques utilisés par l'appareil pour représenter un pixel CSS (px). Bien que la valeur soit de type <number>, sans unité donc, l'unité implicite est dppx.

Syntaxe

-webkit-device-pixel-ratio est une valleur décrivant un intervalle. On peut également utiliser -webkit-min-device-pixel-ratio et -webkit-max-device-pixel-ratio pour fixer un seuil minimum/maximum.

Valeurs

<number>

Le nombre de pixels physiques pour chaque pixel (px) CSS. Bien que la valeur soit un nombre et ne permette pas d'utiliser des unités, l'unité implicite est dppx.

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

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;
  }
}

HTML

<p>Voici un test pour la densité de pixel de votre appareil.</p>

Résultat

Spécifications

Compatibilité des navigateurs

Voir aussi

• resolution
• -webkit-transition
• -webkit-transform-3d
• -webkit-transform-2d
• -webkit-animation
• Article du W3C pour éviter le préfixe