Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.

View in English Always switch to English

-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

<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

css
/* 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

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

CSS

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

Voir aussi