Window : propriété devicePixelRatio

La propriété devicePixelRatio, rattachée à l'interface Window, renvoie le ratio de la résolution exprimée en pixels physiques par rapport à la résolution exprimée en pixels CSS pour l'appareil d'affichage courant.

Cette valeur peut également être interprétée comme le ratio des tailles de pixels : la taille d'un pixel CSS par rapport à la taille d'un pixel physique. Autrement dit, cela indique au navigateur le nombre de pixels réels qui sont utilisés pour dessiner un seul pixel CSS.

Cela s'avère utile lorsqu'il faut gérer les différences de rendu entre un affichage standard et un affichage HiDPI ou Retina, ces derniers utilisant plus de pixels à l'écran pour dessiner les mêmes objets afin d'avoir une image plus nette.

La méthode window.matchMedia() peut être utilisée pour vérifier si la valeur de devicePixelRatio évolue (ce qui peut arriver si la personne déplace la fenêtre vers un affichage utilisant une densité de pixel différente). Voir l'exemple qui suit.

Valeur

Une valeur décimale à double précision qui indique le ratio de entre la résolution de l'affichage en pixels physiques et celle en pixels CSS. Lorsque cette propriété vaut 1, cela indique un affichage classique avec 96 DPI (ou 76 DPI sur certaines plateformes), et si elle vaut 2, on s'attend à ce que l'affichage soit HiDPI/Retina. D'autres valeurs pourront être renvoyées, notamment dans le cas d'une résolution d'affichage inhabituellement basse ou, plus fréquemment, lorsqu'un écran possède une profondeur de pixel plus élevée que le double de la résolution standard de 96 ou 76 DPI.

Exemples

Corriger la résolution dans un élément <canvas>

Un élément <canvas> pourra apparaître flou sur un écran Retina. window.devicePixelRatio pourra être utilisé afin de déterminer la densité de pixel supplémentaire qui peut être ajoutée pour obtenir une image plus nette.

HTML

<canvas id="canvas"></canvas>

JavaScript

const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");

// On définit la taille d'affichage (en pixels CSS).
const size = 200;
canvas.style.width = `${size}px`;
canvas.style.height = `${size}px`;

// On définit la taille réelle en mémoire
// mise à l'échelle pour tenir compte de la densité
// de pixel supplémentaire
const scale = window.devicePixelRatio; // Passez cette valeur à 1 sur les écrans Retina pour voir un canevas flou.
canvas.width = Math.floor(size * scale);
canvas.height = Math.floor(size * scale);

// On normalise le système de coordonnées pour
// utiliser des pixels CSS.
ctx.scale(scale, scale);

ctx.fillStyle = "#bada55";
ctx.fillRect(10, 10, 300, 300);
ctx.fillStyle = "#ffffff";
ctx.font = "18px Arial";
ctx.textAlign = "center";
ctx.textBaseline = "middle";

const x = size / 2;
const y = size / 2;

const textString = "J'aime les licornes";
ctx.fillText(textString, x, y);

Une comparaison côte à côte de l'effet des différentes valeurs de devicePixelRatio sur un affichage Retina.

Surveiller les changements de résolution ou de niveau de zoom

Dans cet exemple, nous allons utiliser une requête média pour observer lorsque la résolution de l'appareil change afin de vérifier la valeur de devicePixelRatio et de gérer les éventuelles mises à jour nécessaires.

JavaScript

Le code JavaScript crée la requête média qui surveille la résolution de l'appareil et vérifie la valeur de devicePixelRatio à chaque changement.

let remove = null;

const updatePixelRatio = () => {
  if (remove != null) {
    remove();
  }
  let mqString = `(resolution: ${window.devicePixelRatio}dppx)`;
  let media = matchMedia(mqString);
  media.addEventListener("change", updatePixelRatio);
  remove = function () {
    media.removeEventListener("change", updatePixelRatio);
  };

  console.log("devicePixelRatio: " + window.devicePixelRatio);
};
updatePixelRatio();

La chaîne de caractères mqString correspond à la requête média elle-même. La requête média commence avec (resolution: 1dppx) (pour les affichages standard) ou avec (resolution: 2dppx) (pour les affichages Retina/HiDPI) et est utilisée pour vérifier si la résolution actuelle de l'affichage correspond à un nombre donné de points par pixel.

La fonction updatePixelRatio() récupère la valeur courante de devicePixelRatio, puis change le contenu de la propriété innerText de l'élément pixelRatioBox en une chaîne de caractères décrivant le ratio comme un pourcentage et comme une valeur numérique brute avec deux chiffres décimaux.

Ensuite, la fonction updatePixelRatio() est appelée une fois pour afficher la valeur initiale. Après quoi, la requête média est créée à l'aide de matchMedia() et addEventListener() est appelée afin de placer updatePixelRatio() comme gestionnaire pour l'évènement change.

HTML

Le HTML crée les boîtes contenant les instructions et la boîte pixel-ratio qui affichera les informations sur le ratio de pixel courant.

<div class="container">
  <div class="inner-container">
    <p>
      Cet exemple illustre les effets d'un zooom
      ou d'un dézoom de la page (mais aussi du 
      déplacement de la fenêtre vers un écran avec
      un autre facteur d'échelle) sur la valeur de 
      la propriété <code>Window.devicePixelRatio</code>. Essayez de zoomer et voyez le
      résultat !
    </p>
  </div>
  <div class="pixel-ratio"></div>
</div>

CSS

body {
  font: 22px arial, sans-serif;
}

.container {
  top: 2em;
  width: 22em;
  height: 14em;
  border: 2px solid #22d;
  margin: 0 auto;
  padding: 0;
  background-color: #a9f;
}

.inner-container {
  padding: 1em 2em;
  text-align: justify;
  text-justify: auto;
}

.pixel-ratio {
  position: relative;
  margin: auto;
  height: 1.2em;
  text-align: right;
  bottom: 0;
  right: 1em;
  font-weight: bold;
}

Résultat

Spécifications

Specification
CSSOM View Module
# dom-window-devicepixelratio

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi